ECharts 柱狀圖上顯示資料,並自定義圖示
阿新 • • 發佈:2018-12-12
先看效果
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://+圖片路徑