Echarts柱状图实现不同颜色渐变色

第一次写文，只是想记录一下自己平时发现的小功能，这篇主要是实现echarts柱状图，每个柱子实现不同颜色的渐变色，也是第一次接触echarts，后台使用ssm，前台是extjs，直接上效果图

直接上js代码

1var option={
2　　title:{//柱状图标题的样式设置
3　　　　text:"日用电量同比图",
4　　　　x : 'center',
5　　　　backgroundColor: '#81a5d5',
6　　　　textStyle: {
7　　　　　　color:'#fff'
8　　　　},
9　　　　padding:[10,40,10,40]
10　　}, 
11　　xAxis :{
12　　　　type: 'category',
13　　　　data:xdata,//数据是后台传过来 ["2017-11-08", "2016-11-08"]
14　　　　axisLabel:{//字体样式
15　　　　　　show: true,
16　　　　　　textStyle: {
17　　　　　　　　color:'#20579a',
18　　　　　　　　fontWeight : 300 ,
19　　　　　　　　fontSize : 14 //文字的字体大小
20　　　　　　}
21　　　　},
22　　　　axisLine: {//x轴线的样式
23　　　　　　lineStyle: {
24　　　　　　　　type: 'solid',
25　　　　　　　　color: '#20579a',//线的颜色
26　　　　　　　　width:'1'//坐标线的宽度
27　　　　　　}
28　　　　},
29　　　　axisTick : { //取消刻度线 
30　　　　　　show : false 
31　　　　},
32　　},
33　　yAxis :{
34　　　　type:'value',
35　　　　show:false,
36　　},
37　　series: 
38　　　　{
39　　　　　　name:'日用电量',
40　　　　　　type:'bar',//不同类型的图，值不一样
41　　　　　　smooth: true,
42　　　　　　barWidth:50,
43　　　　　　data:data,//也是后台数据传来 ["-0.16", "0.14"]
44　　　　　　itemStyle:{
45　　　　　　　　normal:{
46　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
47　　　　　　　　　　color: function (params){
48
49　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
50　　　　　　　　　　　　var colorList = [
51
52　　　　　　　　　　　　　　　　　　　　['#0679e3','#3d97ed','#90c1fc'],
53
54　　　　　　　　　　　　　　　　　　　　['#07b8d9','#62c4db','#86e9fc']
55
56　　　　　　　　　　　　　　　　　　　]; 
57
58                              var index=params.dataIndex;
59                              if(params.dataIndex >= colorList.length){
60                                      index=params.dataIndex-colorList.length;
61                               }
62
63　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
64　　　　　　　　　　　　　     [
65　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
66　　　　　　　　　　　　　　       {offset: 0.5, color: colorList[index][1]},
67　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][2]}
68　　　　　　　　　　　　　     ]);
69　　　　　　　　　　},
70　　　　　　　　　　barBorderRadius: 5  //柱状角成椭圆形
71　　　　　　　　},
72　　　　　
73　　　　}
74　　},
75　　label: { //标签，柱状图显示的文字
76　　　　normal: {
77　　　　　　show: true, //默认为不显示
78　　　　　　position: 'top', //默认显示在内部，当为0时，影响视觉
79　　　　　　formatter:'{c}(kwh)'  //文字显示的格式
80　　　　}
81　　},
82　　textStyle: { //显示文字的样式
83　　　　color:function(params){
84　　　　　　var colorList = ['#0679e3','#07b8d9'];//每个柱子上的字体颜色不一样
85　　　　　　return colorList[params.dataIndex];
86　　　　},
87　　　　fontWeight : 300 ,
88　　　　fontSize : 16 //文字的字体大小
89　　},
90　　grid: { //柱状图与容器之间的位置分布
91　　　　left: '20%', 
92　　　　right: '20%', 
93　　　　bottom: '8%',
94　　　　containLabel: true 
95　　} 
96
97};
98this.chart.setOption(option);

 又要凑字数了，感谢有些同学给我提的问题，以后还是要自己注意，不能把错误代码上传，不负责任