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

最新推荐文章于 2025-06-24 16:51:29 发布

itmacy

最新推荐文章于 2025-06-24 16:51:29 发布

阅读量2.1k

点赞数 5

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/itmacy/article/details/136473742

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在ECharts图表中为柱状图添加线性渐变色，提供了具体的代码示例，展示了从0%到100%颜色变化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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% 处的颜色
              }
            ]
          }
        },
    }
  ]
};