ECharts 定製 label 樣式

ECharts 定製 label 樣式

起因

實現對 label 的樣式定製，自定義字體顏色、大小等屬性；效果如下圖

實現

itemStyle: {
    normal: {
        color: '#f7ba0e',
        label: {
            show: true,
            position: 'top',
            formatter: function(params) {
                for (var i = 0,
                l = option.xAxis[0].data.length; i < l; i++) {
                    if (option.xAxis[0].data[i] == params.name) {
                        var val1 = params.value || 0;
                        var val2 = option.series[0].data[i] || 0;
                        return '{color1|' + val1 + '}/{color2|' + val2 + '}';
                    }
                }
            },
            rich: {
                color1: {
                    color: '#f7ba0e'
                },
                color2: {
                    color: '#42a1fe'
                }
            },
            textStyle: {
                color: '#333'
            }
        }
    }
}

（1）通過“formatter”實現內容自定義；

（2）通過“rich”項控制內容樣式；

    '{color1|' + val1 + '}/{color2|' + val2 + '}' 用“color1”的樣式顯示“val1”，用“color2”的樣式顯示val2；

（3）下方有對“color1”和“color2”樣式的具體定義；

官方文檔

官方文檔有更加詳細的描述：

http://echarts.baidu.com/option.html#xAxis.axisLabel.rich