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'
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​​