[Feature] 颜色渐变使用conic-gradient

[horizonzzzz]

What problem does this feature solve?

是否有方法将颜色设置为conic-gradient形式？
我在使用中并没有找到设置的方法，只能用canvas画一个然后放到color里。

What does the proposed API look like?

设置color：

{
  type: 'conic',
  a: 0,
  x: 0.5,
  y: 0.5,
  colorStops: [{
      offset: 0, color: 'red'
  }, {
      offset: 1, color: 'blue'
  }],
  global: false
}

或者使用渐变色构造函数：

echarts.graphic.ConicGradient

[echarts-bot]

@horizonzzzz It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Feature] Color gradient uses conic-gradient

[Ovilia]

conic-gradient is not supported because lack of scenerio. Could you please provide the situation where this should be provided? If it's common, you are welcomed to make a pull request to support this. If not, you may find some hack ways or try another design.

[horizonzzzz]

Well, this is also the first time I have encountered this kind of chart requirement in my work, which is a round bar chart with gradual color change. canvas insertion is used to solve this problem.

[adithyaappu]

@horizonzzzz can you provide a bit more explanation on the 'canvas insertion', that you mentioned? I'm also facing the same issue, and my use case is a 360 degree gauge chart.

[jiayp]

然后

请问怎么使用canvas画扇形渐变并放到echarts里面使用？能指教一下吗？

[jiayp]

because

Like this AQI

[horizonzzzz]

@adithyaappu @jiayp

      import Color from 'color'

      const color = new Color(this.color)
      const canvas = document.createElement('canvas')
      canvas.setAttribute('width', this.size)
      canvas.setAttribute('height', this.size)
      const ctx = canvas.getContext('2d')
      const gradient = ctx.createConicGradient(
        Math.PI * 1.5,
        this.size / 2,
        this.size / 2
      )
      gradient.addColorStop(0, color.mix(Color('white'), 0.5))
      gradient.addColorStop(1, this.color)
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, this.size, this.size)

and then set color: { image: canvas }

Modify the code as appropriate

[jiayp]

@adithyaappu @jiayp

      import Color from 'color'

      const color = new Color(this.color)
      const canvas = document.createElement('canvas')
      canvas.setAttribute('width', this.size)
      canvas.setAttribute('height', this.size)
      const ctx = canvas.getContext('2d')
      const gradient = ctx.createConicGradient(
        Math.PI * 1.5,
        this.size / 2,
        this.size / 2
      )
      gradient.addColorStop(0, color.mix(Color('white'), 0.5))
      gradient.addColorStop(1, this.color)
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, this.size, this.size)

and then set color: { image: canvas }

Modify the code as appropriate

Thanks, you saved me.

[mstijak]

Is it possible to do the same with the SVG renderer?

It would be great to support this feature natively.

[horizonzzzz]

Is it possible to do the same with the SVG renderer?

i don't know, you can try it