ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

本文首发：《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》

ECharts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名，那么你可以需要使用全局统一的识别色彩，那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置包括 ECharts 在内的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，早用早下班，详见本文文末。

方法一：在 series 内配置饼状图颜色

series: [
  itemStyle: {
    normal: {
      color: function (colors) {
         var colorList = [
           '#fc8251',
           '#5470c6',
           '#91cd77',
           '#ef6567',
           '#f9c956',
           '#75bedc'
         ];
         return colorList[colors.dataIndex];
       }
     },
   }
 ]

EChart.js 在 series 中设置饼状图颜色的 Demo 源代码：

option = {
  title: {
    text: '卡拉云流量来源渠道汇总',
    subtext: '本月数据',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'GA 数据统计',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1017, name: '搜索引擎' },
        { value: 583, name: '直接访问' },
        { value: 873, name: '微信朋友圈' },
        { value: 432, name: '口碑介绍' },
        { value: 332, name: '电话销售' },
        { value: 678, name: 'Feeds 广告' }
      ],