echarts如何动态计算饼图从圆心到外的渐变色

shenjx
  • 132

echarts如何动态计算饼图从圆心到外的渐变色

这是官方渐变色配置说明,现在需要根据项的占用面动态计算x、y、x2、y2的值

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}

实现效果
image.png

回复
阅读 523
1 个回答
✓ 已被采纳

在项目github中找了解决办法,使用global: true属性解决

{
              // Use global coordinates
              global: true,
              type: 'radial',
              x: myChart.getWidth() / 2, // calculate x
              y: myChart.getHeight() / 2, // calculate y
              r: 200,
              colorStops: [
                { offset: .75, color: c3 },
                { offset: .95, color: c2 },
                { offset: 1, color: c }
              ]
            }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏