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
}

效果圖