echarts柱状图-给柱状体添加渐变色

最新推荐文章于 2024-05-30 23:16:00 发布

itmacy

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量1.1k

点赞数 5

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/itmacy/article/details/136473742

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

给柱状体添加渐变色的效果如下：
在这里插入图片描述
代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
       itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#3484ff' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#536AF9' // 50% 处的颜色
              },
              {
                offset: 1,
                color: '#6F5DFE' // 100% 处的颜色
              }
            ]
          }
        },
    }
  ]
};