echarts圆形图能从内到外颜色渐变吗?

作者站长头像
站长
· 阅读数 13
// 线性渐变,前四个参数分别是 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: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

用官网的径向渐变 好像不是从圆图的中心点向外,而是从每一个区块的中心点计算的,还是我使用错了echarts圆形图能从内到外颜色渐变吗?

回复
1个回答
avatar
test
2024-07-16

answer image

我是用径向渐变做的,当然也可以径向渐变做,就是会比较麻烦。

相关阅读:color - Apache ECharts指定图表的大小 - Apache ECharts

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容