echarts 實現在柱狀圖繪制標注點

一、圖例

二、學習筆記
1、在柱狀圖上使用markPoint繪制標注點。
2、Y軸自適配：scale: true。
3、Y軸scale后標注點可能由於位置超出畫布范圍看不到，可以通過設置畫布距離grid的位置讓其顯示。
4、標注的坐標：coord[x軸, y軸]。
5、疑問點：感覺在范例中symbolOffset並沒有效果呈現？？？

三、范例

let symbolArray = ['triangle', 'rect', 'circle', 'arrow', 'diamond', 'emptyRect', 'emptyTriangle'];
let symbolColors = ['pink', 'blue', '#3CC3B6', '#3266E8', '#F07C4F', '#EDA949', '#F07C4F'];
let xAxisDatum = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let seriesDatum = [120, 200, 150, 80, 70, 120, 130];
let markPointDatum = [];
for (var i = 0; i < seriesDatum.length; i++) {
    let _obj = {
        symbol: symbolArray[i],
        symbolSize: [10,10],
        symbolRotate: 0,
        symbolOffset: ['25%', -10],
        coord: [i, seriesDatum[i]+10],
        value: seriesDatum[i] - 20,
        label:{
            show:true,
            color: '#000',
            fontSize: 12,
            position: 'right'
        }, 
        itemStyle: {
            borderWidth: 3,
            borderColor: symbolColors[i],
            color: symbolColors[i],
        }
    }
    markPointDatum.push(_obj);
}
option = {
     grid:{
        x: 0,
        y: 50,
        x2: 0,
        y2: 20,
        borderWidth:1
    },
    xAxis: {
        type: 'category',
        data: xAxisDatum
    },
    yAxis: {
        type: 'value',
        scale: true,
    },
    series: [{
        data: seriesDatum,
        type: 'bar',
        markPoint:{
            data: markPointDatum
        }
    }]
};