码迷,mamicode.com
首页 > 其他好文 > 详细

echarts柱状图实现多条不同颜色渐变

时间:2021-04-20 15:37:10      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:不同   graphic   die   UNC   ams   柱状图   params   normal   radius   

series层里面
 
itemStyle: {
              normal: {
                // 设置圆角
                barBorderRadius: [6,0,6,0],
                //多条线实现渐变效果
                color:function(params) {
                  var colorList = [
                    [‘#662C58‘,‘#F84F50‘],
                    [‘#124480‘,‘#46E6ED‘],
                    [‘#032786‘,‘#0068F2‘],
                    [‘#433E68‘,‘#E7A95F‘],
                    [‘#0D3285‘,‘#1E76C8‘],
                    [‘#433E68‘,‘#E7A95F‘],
                    [‘#662C58‘,‘#F84F50‘],
                    [‘#124480‘,‘#46E6ED‘]
                  ]
                  var index=params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                      index = params.dataIndex - colorList.length;
                  }
                  return new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: colorList[index][0] },
                  { offset: 1, color: colorList[index][1] }
                  ])
                },
                
              }
            },

echarts柱状图实现多条不同颜色渐变

标签:不同   graphic   die   UNC   ams   柱状图   params   normal   radius   

原文地址:https://www.cnblogs.com/yoututu/p/14674828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!