ECharts 定制 label 樣式

起因

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

實現

 

1.  
   itemStyle: {
2.  
   normal: {
3.  
   color: '#f7ba0e',
4.  
   label: {
5.  
   show: true,
6.  
   position: 'top',
7.  
   formatter: function(params) {
8.  
   for (var i = 0,
9.  
   l = option.xAxis[ 0].data.length; i < l; i++) {
10.  
    if (option.xAxis[0].data[i] == params.name) {
11.  
    var val1 = params.value || 0;
12.  
    var val2 = option.series[0].data[i] || 0;
13.  
    return '{color1|' + val1 + '}/{color2|' + val2 + '}';
14.  
    }
15.  
    }
16.  
    },
17.  
    rich: {
18.  
    color1: {
19.  
    color: '#f7ba0e'
20.  
    },
21.  
    color2: {
22.  
    color: '#42a1fe'
23.  
    }
24.  
    },
25.  
    textStyle: {
26.  
    color: '#333'
27.  
    }
28.  
    }
29.  
    }
30.  
    }

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

 

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

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

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

官方文檔

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

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

--------------------- 本文來自 lufaxinT 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/tomorrow13210073213/article/details/79654892?utm_source=copy