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

ECharts 饼状图颜色设置教程

1. 方法一：在 series 内配置饼状图颜色
2. 方法二：在 option 内配置饼状图颜色
3. 方法三：在 data 内配置饼状图颜色
4. 方法四：配置 ECharts 饼状图随机颜色

Charts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

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

series: [
  itemStyle: {
    normal: {
      color: function (colors) {
         var colorList = [
                    '#fc8251',
                    '#5470c6',
                    '#9A60B4',
                    '#ef6567',
                    '#f9c956',
                    '#3BA272'
                  ];
         return colorList[colors.dataIndex];
       }
     },
   }
 ]

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

option = {

  tooltip: {
    trigger: 'item'
  },
  legend: {
  orient: 'vertical',
  left  : 'left',
  icon  :'circle'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
           itemStyle: {
    normal: {
      color: function (colors) {
         var colorList = [
                    '#fc8251',
                    '#5470c6',
                    '#9A60B4',
                    '#ef6567',
                    '#f9c956'
                  ];
         return colorList[colors.dataIndex];
       }
     },
   },
      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' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

效果

方法二：在 option 内配置饼状图颜色

option = {

  tooltip: {
    trigger: 'item'
  },
  legend: {
  orient: 'vertical',
  left  : 'left',
  icon  :'circle'
  },
   color:['#fc8251','#5470c6','#9A60B4','#ef6567', '#999'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
  //itemStyle: {
  //   normal: {
  //     color: function (colors) {
  //       var colorList = [
  //                   '#fc8251',
  //                   '#5470c6',
  //                   '#9A60B4',
  //                   '#ef6567',
  //                   '#f9c956'
  //                 ];
  //       return colorList[colors.dataIndex];
  //     }
  //   },
  // },
      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' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

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

**data: [
        { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}},
        { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}},
        { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}},
        { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}},
        { value: 432, name: '口碑介绍',itemStyle: {color:'#f9c956'}}
      ]
**

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

option = {

  tooltip: {
    trigger: 'item'
  },
  legend: {
  orient: 'vertical',
  left  : 'left',
  icon  :'circle'
  },
   color:['#fc8251','#5470c6','#9A60B4','#ef6567', '#999'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
  //itemStyle: {
  //   normal: {
  //     color: function (colors) {
  //       var colorList = [
  //                   '#fc8251',
  //                   '#5470c6',
  //                   '#9A60B4',
  //                   '#ef6567',
  //                   '#f9c956'
  //                 ];
  //       return colorList[colors.dataIndex];
  //     }
  //   },
  // },
      radius: '50%',
     data: [
        { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}},
        { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}},
        { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}},
        { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}},
        { value: 332, name: '电话销售',itemStyle: {color:'#f9c956'} },
        { value: 432, name: '口碑介绍',itemStyle: {color:'#75bedc'}}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};