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 aphic.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);
⼜要凑字数了，感谢有些同学给我提的问题，以后还是要⾃⼰注意，不能把错误代码上传，不负责任

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。