echarts饼图，自定义每个数据想要展示的图形颜色

最新推荐文章于 2022-12-12 10:43:49 发布

LAHM8963

最新推荐文章于 2022-12-12 10:43:49 发布

阅读量830

点赞数

分类专栏： vue echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/LAHM8963/article/details/122174255

版权

本文介绍了如何在Echarts饼图中利用回调函数params实现每个数据项显示定制颜色的方法，通过在series的itemStyle中根据数据name动态设置颜色。

摘要由CSDN通过智能技术生成

官方文档

使用回调函数 params

此处只截取series的部分代码

series: [
  {
    name: 'Nightingale Chart',
    type: 'pie',
    radius: ['20%', '50%'],
    center: ['40%', '50%'],
    left: '0%',
    label: {
      show: true,
      lineHeight: 20,
      color: '#fff',
      fontSize: 14,
      formatter: '{b_set|{b}}\n{c_set|{c}例}',
      rich: {
        b_set: {
          color: '#fff',
          lineHeight: 20,
          align: 'center'
        },
        c_set: {
          color: '#fff'
        }

      }
    },
    data: this.alarmTypeList,
    itemStyle: {
      color: function(params) {
        if (params.name === '一般') { return '#5ccdbf' } 
        else if (params.name ===