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

echarts版本号

如果是通过script标签引入的话,则可以直接在控制台输入echarts就可以看到版本号的信息。我当前的版本号是:4.3.0
echarts中实现线性渐变的两种方式

实现方式

以下配置都是配置在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
}

效果图

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

上一篇:Elasticsearch(ES)分词器的那些事儿


下一篇:kafka 工作流程及文件存储机制