echarts柱状图渐变色

最新推荐文章于 2024-09-25 15:19:30 发布

哆比哆比

最新推荐文章于 2024-09-25 15:19:30 发布

阅读量670

点赞数

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

本文链接：https://blog.csdn.net/WMW_wmw/article/details/125993985

版权

echarts 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用ECharts库创建具有圆角效果的柱状图。通过设置`barBorderRadius`属性为[50,50,50,50]，并应用线性渐变颜色，可以实现美观的视觉效果。数据系列名为'办件数'，并使用了`LinearGradient`来定义颜色变化，从`#5EC6A3`平滑过渡到`#0C6D64`。

摘要由CSDN通过智能技术生成

series: [
            {
              name: '办件数',
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 50, 50],
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#5EC6A3' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: '#5EC6A3' // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#0C6D64' // 100% 处的颜色
                      }
                    ],
                    false
                  )
                }
              },
              data: arr.data1
            },....]