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);

  

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

 

转载于:https://www.cnblogs.com/Cassie-wang/p/8628697.html

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值