echarts柱状图设置颜色渐变

最新推荐文章于 2024-08-08 13:18:39 发布

Solitude_dong

最新推荐文章于 2024-08-08 13:18:39 发布

阅读量694

点赞数

分类专栏： Vue 文章标签： echarts

本文链接：https://blog.csdn.net/qq_30072161/article/details/117368864

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ECharts中设置图形的fillerColor属性，通过LinearGradient实现水平渐变效果。从颜色 '#1eb5e5' 平滑过渡到 '#5ccbb1'，为图表添加视觉吸引力。这种技巧常用于提升数据可视化的美观度和专业性。

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

fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
  {
    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
    //给第一个设置0，第四个设置1，就是垂直渐变
    offset: 0,
    color: '#1eb5e5'
  },
  {
    offset: 1,
    color: '#5ccbb1'
  }
]),

效果图
在这里插入图片描述