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

Question

// 线性渐变，前四个参数分别是 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'
}

用官网的径向渐变 好像不是从圆图的中心点向外，而是从每一个区块的中心点计算的，还是我使用错了

Answer 1

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

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

Answer 2

参考楼上大佬办法，改了半天比例不对，才发现内环 外环比例理解错误。一直用的offset 0)) 到 1

  const colors = [
    ['#9571f9', '#7b52ee'],
    ['#41F2B2', '#29C287'],
    ['#FB9D03', '#F77A1F'],
    ['#6C91FE', '#3F57EB'],
    ['#ABE039', '#29C287'],
    ['#F4D602', '#FFC93E'],
    ['#F05B8E', '#F0336B'],
    ['#E864F9', '#D713F7']
  ];
  return colors.map((i) => {
    return {
      type: 'radial',
      x: 200,
      y: 200,
      r: 200,
   
      colorStops: [
        {
          offset: 0.4,
          color: i[0] // 0% 处的颜色
        },
        {
          offset: 0.7, 
          color: i[1] // 100% 处的颜色
        }
      ],
      global: true,
      // global: false
    };
  });
}
option = {
  width: 400,
  height: 400,
  color: getPieColors(),
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'], // 内环 外环比例
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};