echarts中实现线性渐变的两种方式

echarts版本号#

如果是通过script标签引入的话，则可以直接在控制台输入echarts就可以看到版本号的信息。我当前的版本号是：4.3.0

实现方式#

以下配置都是配置在series.color下

方式1：使用echarts内置的渐变色生成器#

• (0,0,1,0) 表示 从坐标(0,0)到坐标(1,0)，也就是向右渐变

color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  // 百分之0状态之下的颜色值
  {
    offset: 0,
    color: '#5052EE'
  },
  // 百分之100状态之下的颜色值
  {
    offset: 1,
    color: '#AB6EE5'
  }
])

方式2：使用配置项#

• x 和y 表示起始的坐标，x2和y2表示终点坐标, 所以也就是向右渐变

color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 0,
  colorStops: [
    { offset: 0, color: '#5052EE' // 0% 处的颜色
    }, 
    {
      offset: 1, color: '#AB6EE5' // 100% 处的颜色
    }
  ],
  globalCoord: false // 缺省为 false
}

效果图#