ECharts 饼状图颜色设置

背景：
引入饼状图，不自定义颜色，会自动给颜色，但是，在不同的页面调用了同一个接口的饼图，相同数据，显示的颜色不一致，希望显示的能颜色一致
。
解决
。
饼状图颜色设置有好几种方式

• 方式一：在 option 内通过color属性配置饼状图颜色
• 方式二：在 series 内配置饼状图颜色
• 方式三：在 data 内配置饼状图颜色

先放下实现的图例

具体使用
方式一：在 option 内通过color属性配置饼状图颜色

option = {
  color: ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

方式二：在 series 内配置饼状图颜色

option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      itemStyle: {
        normal: {
          color: function (colors) {
            let colorList = [
              '#C1EBDD',
              '#FFC851',
              '#5A5476',
              '#1869A0',
              '#FF9393'
            ];
            return colorList[colors.dataIndex];
          }
        }
      },
    }
  ]
};

方式三：在 data 内配置饼状图颜色

option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine', itemStyle: { color: '#C1EBDD' } },
        { value: 735, name: 'Direct', itemStyle: { color: '#FFC851' } },
        { value: 580, name: 'Email', itemStyle: { color: '#5A5476' } },
        { value: 484, name: 'Union Ads', itemStyle: { color: '#1869A0' } },
        { value: 300, name: 'Video Ads', itemStyle: { color: '#FF9393' } }
      ]
    }
  ]
};