v-charts如何设置颜色渐变

[David-Chen-zh]

Summary 简述

请问如何设置v-charts的线性颜色渐变，如果引入echarts之后可以在series中设置颜色渐变效果，但是现在想单纯只靠v-charts实现相应的效果，应该如何设置。

Expect 期望结果

只靠v-charts实现颜色线性渐变效果

Reproduce 重现示例

series: { itemStyle: { // 控制平常状态和鼠标悬浮时的颜色渐变 normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0.5, color: '#02d0e9' }, { offset: 0.8, color: '#0da7d3' }, { offset: 1, color: '#1d72b7' } ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ] ) }, } }

[David-Chen-zh]

颜色渐变可以通过引入echarts实现 但是想单独依靠v-charts请问应该如何实现

[David-Chen-zh]

如果不能单纯依靠v-charts来实现颜色渐变的话 想修改为设置visualMap参数来实现 但是颜色顺序好像是默认的数组，在哪里对颜色的顺序进行调整？

[maxy612]

https://codepen.io/maxycode/pen/PxPwYq 可以利用v-chart的钩子函数获取到echarts，然后调用echarts生成渐变的函数，当然，这样会有些麻烦。

[David-Chen-zh]

好的 谢谢 很有帮助！

[tylerrrkd]

官方文档已支持不通过echarts实例进行渐变。

    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
        offset: 0, color: '#04ff74' // 0% 处的颜色
      }, {
        offset: 1, color: '#4cfdff' // 100% 处的颜色
      }],
    }

[iTaster]

官方文档已支持不通过echarts实例进行渐变。

    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
        offset: 0, color: '#04ff74' // 0% 处的颜色
      }, {
        offset: 1, color: '#4cfdff' // 100% 处的颜色
      }],
    }

对以上内容补充：放在extend=>series=>itemStyle下才可以显示正常