apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.53k stars 19.62k forks source link

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

Closed horizonzzzz closed 9 months ago

horizonzzzz commented 9 months ago

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[bot] commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

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 commented 7 months ago

@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.

image

jiayp commented 5 months ago

然后

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

jiayp commented 5 months ago

because

image Like this AQI

horizonzzzz commented 5 months ago

@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 commented 5 months ago

@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.