echarts更改柱状图柱顶设置文字和颜色

gitbbs

条形柱状的颜色可以在series-itemStyle中通过color进行设置，并且每一根都可以设置为不同。因为color可以定义为function
设置主体颜色主要代码（params为4根柱体，dataIndex是序号，在echarts中可以通过echarts.graphic.LinearGradient来设置渐变色）：

1. color: function (params) {
   
2.     var colorList = [  ['#5498ff', '#89d3f6'],['#0acd81', '#b7f5bf'], ['#ff9137', '#ffd59a'], ['#f97878', '#ffafaf'] ];
   
3.     var index = params.dataIndex;
   
4.     if (params.dataIndex >= colorList.length) {
   
5.         index = params.dataIndex - colorList.length;
   
6.     }
   
7.     return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorList[index][0] }, { offset: 1, color: colorList[index][1] } ]);
   
8. }
   

复制代码

此时柱体上面并没有显示文字，如果需要显示文字，可以在itemStyle继续设置label属性

具体设定方式：

1. label: {
   
2.     show: true,
   
3.     position: 'top',
   
4.     textStyle: {
   
5.         fontSize: '14px',
   
6.     },
   
7. },
   

复制代码

此时，图表的样式（柱状上的文字颜色为统一的黑色）：

当时我想能否在textStyle中对color类似与柱条颜色一样设置，但是通过查看配置项手册发现只能设置为字符串，不能通过function来设置。这样的话四种文字还是只会变成一种颜色。

可以在series的data设置时添加配置颜色，之前设置数据时是直接数值数组的方式

1. // 成绩
   
2. data: [9, 21, 23, 12]
   

复制代码

其实可以在配置时，就将label的相应颜色设置，数值放在value中 代码：

1. data: [{
   
2.     value:9,
   
3.     label: {
   
4.         textStyle: { color: '#2e77dc' }
   
5.     }
   
6. }, {
   
7.     value:21,
   
8.     label: {
   
9.         textStyle: { color: '#0aa211' }
   
10.     }
    
11. }, {
    
12.     value:23,
    
13.     label: {
    
14.         textStyle: { color: '#ff6600' }
    
15.     }
    
16. }, {
    
17.     value:12,
    
18.     label: {
    
19.         textStyle: { color: '#f12222' }
    
20.     }
    
21. }]
    

复制代码

完整代码如下：

1. option01 = {
   
2.     xAxis: {
   
3.         type: 'category',
   
4.         data: ['优秀', '良好', '合格','不合格'],
   
5.         axisTick: { show: false, },
   
6.         axisLabel: {
   
7.             textStyle: { color: '#999999' },
   
8.             interval: 0,
   
9.         },
   
10.         axisLine: {   
    
11.             lineStyle: { color: '#cccccc' }
    
12.         },
    
13.     },
    
14.     yAxis: {
    
15.         type: 'value',
    
16.         name: '人数',
    
17.         nameTextStyle:{ color: '#666666' },
    
18.         axisTick: { show: false },
    
19.         axisLabel: { textStyle: { color: '#999999' }, },
    
20.         axisLine: {   
    
21.             lineStyle: { color: '#cccccc', },
    
22.             show: true
    
23.         },
    
24.         splitLine: {  
    
25.             show: true,
    
26.             lineStyle:{ type: 'dashed', }
    
27.         }
    
28.     },
    
29.     series: [
    
30.         {
    
31.             name: '班级成绩分布',
    
32.             type: 'bar',
    
33.             barWidth: '24px',
    
34.             itemStyle:{
    
35.                 normal:{
    
36.                     barBorderRadius:[12, 12, 0, 0],
    
37.                     label: {
    
38.                         show: true,
    
39.                         position: 'top',
    
40.                         textStyle: { fontSize: '14px', },
    
41.                     },
    
42.                     color: function (params) {
    
43.                         var colorList = [  ['#5498ff', '#89d3f6'],['#0acd81', '#b7f5bf'], ['#ff9137', '#ffd59a'], ['#f97878', '#ffafaf'] ];
    
44.                         var index = params.dataIndex;
    
45.                         if (params.dataIndex >= colorList.length) {
    
46.                             index = params.dataIndex - colorList.length;
    
47.                         }
    
48.                         return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorList[index][0] }, { offset: 1, color: colorList[index][1] } ]);
    
49.                     },
    
50.                 }
    
51.             },
    
52.             // 成绩
    
53.             data: [{
    
54.                 value:9,
    
55.                 label: {
    
56.                     textStyle: { color: '#2e77dc' }
    
57.                 }
    
58.             }, {
    
59.                 value:21,
    
60.                 label: {
    
61.                     textStyle: { color: '#0aa211' }
    
62.                 }
    
63.             }, {
    
64.                 value:23,
    
65.                 label: {
    
66.                     textStyle: { color: '#ff6600' }
    
67.                 }
    
68.             }, {
    
69.                 value:12,
    
70.                 label: {
    
71.                     textStyle: { color: '#f12222' }
    
72.                 }
    
73.             }]
    
74.         }
    
75.     ],
    
76.     grid: {
    
77.         x: 40,
    
78.         y: 30,
    
79.         x2: 0,
    
80.         y2: 35
    
81.     },
    
82. }
    

复制代码