Echarts柱狀圖實現不同顏色漸變色

第一次寫文，只是想記錄一下自己平時發現的小功能，這篇主要是實現echarts柱狀圖，每個柱子實現不同顏色的漸變色，也是第一次接觸echarts，后台使用ssm，前台是extjs，直接上效果圖

直接上js代碼

var option={
　　title:{//柱狀圖標題的樣式設置
　　　　text:"日用電量同比圖",
　　　　x : 'center',
　　　　backgroundColor: '#81a5d5',
　　　　textStyle: {
　　　　　　color:'#fff'
　　　　},
　　　　padding:[10,40,10,40]
　　}, 
　　xAxis :{
　　　　type: 'category',
　　　　data:xdata,//數據是后台傳過來 ["2017-11-08", "2016-11-08"]
　　　　axisLabel:{//字體樣式
　　　　　　show: true,
　　　　　　textStyle: {
　　　　　　　　color:'#20579a',
　　　　　　　　fontWeight : 300 ,
　　　　　　　　fontSize : 14 //文字的字體大小
　　　　　　}
　　　　},
　　　　axisLine: {//x軸線的樣式
　　　　　　lineStyle: {
　　　　　　　　type: 'solid',
　　　　　　　　color: '#20579a',//線的顏色
　　　　　　　　width:'1'//坐標線的寬度
　　　　　　}
　　　　},
　　　　axisTick : { //取消刻度線 
　　　　　　show : false 
　　　　},
　　},
　　yAxis :{
　　　　type:'value',
　　　　show:false,
　　},
　　series: 
　　　　{
　　　　　　name:'日用電量',
　　　　　　type:'bar',//不同類型的圖，值不一樣
　　　　　　smooth: true,
　　　　　　barWidth:50,
　　　　　　data:data,//也是后台數據傳來 ["-0.16", "0.14"]
　　　　　　itemStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//每個柱子的顏色即為colorList數組里的每一項,如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
　　　　　　　　　　color: function (params){

　　　　　　　　　　　　//我這邊就兩個柱子，大體就兩個柱子顏色漸變，所以數組只有兩個值，多個顏色就多個值
　　　　　　　　　　　　var colorList = [

　　　　　　　　　　　　　　　　　　　　['#0679e3','#3d97ed','#90c1fc'],

　　　　　　　　　　　　　　　　　　　　['#07b8d9','#62c4db','#86e9fc']

　　　　　　　　　　　　　　　　　　　]; 

                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex-colorList.length;
                               }

　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
　　　　　　　　　　　　　　       {offset: 0.5, color: colorList[index][1]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][2]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　　　barBorderRadius: 5  //柱狀角成橢圓形
　　　　　　　　},
　　　　　
　　　　}
　　},
　　label: { //標簽，柱狀圖顯示的文字
　　　　normal: {
　　　　　　show: true, //默認為不顯示
　　　　　　position: 'top', //默認顯示在內部，當為0時，影響視覺
　　　　　　formatter:'{c}(kwh)'  //文字顯示的格式
　　　　}
　　},
　　textStyle: { //顯示文字的樣式
　　　　color:function(params){
　　　　　　var colorList = ['#0679e3','#07b8d9'];//每個柱子上的字體顏色不一樣
　　　　　　return colorList[params.dataIndex];
　　　　},
　　　　fontWeight : 300 ,
　　　　fontSize : 16 //文字的字體大小
　　},
　　grid: { //柱狀圖與容器之間的位置分布
　　　　left: '20%', 
　　　　right: '20%', 
　　　　bottom: '8%',
　　　　containLabel: true 
　　} 

};
this.chart.setOption(option);

　　

 又要湊字數了，感謝有些同學給我提的問題，以后還是要自己注意，不能把錯誤代碼上傳，不負責任