1. 程式人生 > >ECharts 柱狀圖上顯示資料,並自定義圖示

ECharts 柱狀圖上顯示資料,並自定義圖示

先看效果

1.柱狀圖上顯示資料,使用的是series[0].label.formatter

series: [{
    name:'近一週每日',
    type: 'bar',
    barGap: '0',
    label: {
        normal: {
            show: true,
            formatter: '{c}%',
            position: "top",
            textStyle: {
                color: "#fff",
                fontSize: 14
            }
        }
    }
  }

2.柱形圖上新增自定義icon,也是在series裡面,在lable的同級新增如下程式碼

markPoint: {
        formatter: function(params){
            return '<img src="' 
                    + params.data.symbol.replace('image://', '')
                    + '"/>';
        },
        symbolSize:'15',
        data: [
            {coord: [0,10],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
            {coord: [1,10],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
            {coord: [2,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
            {coord: [3,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
            {coord: [4,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
            {coord: [5,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
            {coord: [6,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
        ],
        label:{
            show:true,
            position:'middle'
        }
    }

coord:[0,10],一個引數是我們想要新增icon柱形圖的index,第二個是柱形圖的value,即我們顯示在柱形圖上的資料

symbolOffset:使我們icon在柱狀圖上的位置,分別代表x,y軸的偏移量

symbol:是我們新增icon的路徑,格式是image://+圖片路徑