1. 程式人生 > >echart 圖例設置自定義圖標?

echart 圖例設置自定義圖標?

timeout text etop avi 獲取 onf push sel Matter

option = {
    legend: {
        orient: ‘horizontal‘, // ‘vertical‘
        x: ‘right‘, // ‘center‘ | ‘left‘ | {number},
        y: ‘top‘, // ‘center‘ | ‘bottom‘ | {number}
        backgroundColor: ‘#eee‘,
        borderColor: ‘rgba(178,34,34,0.8)‘,
        borderWidth: 4,
        padding: 10,    //
[5, 10, 15, 20] itemGap: 20, textStyle: {color: ‘red‘}, selected: { ‘降水量‘ : false }, data: [ { name:‘蒸發量‘, icon : ‘image://../asset/ico/favicon.png‘, textStyle:{fontWeight:‘bold‘, color:‘green‘} },
‘降水量‘,‘最高氣溫‘, ‘最低氣溫‘ ] }, xAxis :{ data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘] }, yAxis : [ { type : ‘value‘, axisLabel : { formatter: ‘{value} ml‘ } }, { type : ‘value‘, axisLabel : { formatter:
‘{value} °C‘ }, splitLine : {show : false} } ], series : [ { name:‘蒸發量‘, type:‘bar‘, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6] }, { name:‘最高氣溫‘, type:‘line‘, yAxisIndex: 1, data:[11, 11, 15, 13, 12, 13, 10] }, { name:‘降水量‘, type:‘bar‘, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6] } ] }; // 動態添加默認不顯示的數據 var ecConfig = require(‘echarts/config‘); myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){ var selected = param.selected; var len; var added; if (selected[‘最低氣溫‘]) { len = option.series.length; added = false; while (len--) { if (option.series[len].name == ‘最低氣溫‘) { // 已經添加 added = true; break; } } if (!added) { myChart.showLoading({ text : ‘數據獲取中‘, effect: ‘whirling‘ }); setTimeout(function (){ option.series.push({ name:‘最低氣溫‘, type:‘line‘, yAxisIndex: 1, data:[-2, 1, 2, 5, 3, 2, 0] }); myChart.hideLoading(); myChart.setOption(option); }, 2000) } } });

參考地址:http://echarts.baidu.com/echarts2/doc/example/legend.html

如果這篇文章對您有幫助,您可以打賞我

技術分享圖片

echart 圖例設置自定義圖標?