一组图例控制两个图形 && 一个饼图中既显示中心文字又显示数值

转载

mb5fdcad0be2e90 2021-08-04 15:02:00

文章标签 饼图 3c 数据图例解决方案 文章分类 Java 后端开发

需求描述：

如下图所示

1. 我们希望通过控制最上方的一组图例，来实现两个饼图对应项同时的显示或隐藏；

2. 在一个饼图中，我们希望中心位置一直显示该饼图的标题，同时扇形区域上显示对应模块的数值，鼠标悬浮时再具体显示相关内容。

一组图例控制两个图形 && 一个饼图中既显示中心文字又显示数值_数据

解决方案（代码展示）：

需求1 解决方案：只需初始化一个 echarts 实例，实例中正常写入一个legend 对象，但是 series 数组需要加入“事件总数”和“逾期事件”两个对象，再通过位置的调整，即可实现一组图例控制两个饼图。

此时的效果图：

一组图例控制两个图形 && 一个饼图中既显示中心文字又显示数值_解决方案_02

HTML部分：

<div id="pie1" ref="pie1" style="width: 100%; height: 100%"></div>

JS（option）部分：

const option = {
  // 自定义颜色（数组）可以不设置此项，会按照echarts提供的默认颜色展示
  color: this.pieColor,
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '1%',
    textStyle: {
      // 使图例文字颜色和图例颜色对应的相同
      color: () => {},
    },
  },
  series: [
    {
      name: '事件总数',
      type: 'pie',
      radius: [40, 62],

// 控制位置

center: ['50%', '30%'],
      label: {
        show: true,
        normal: {
          formatter: (params) => {
            console.log(params, 'params');
            return params.seriesName;
          },
          position: 'center',
          color: 'white',
        },
      },
      itemStyle: {
        borderRadius: 10,
        borderColor: '#003C7A',
        borderWidth: 3,
      },
      data: data1,
    },
    {
      name: '逾期事件',
      type: 'pie',
      radius: [40, 62],

// 控制位置

center: ['50%', '70%'],
      label: {
        show: true,
        normal: {
          formatter: (params) => {
            return params.seriesName;
          },
          position: 'center',
          color: 'white',
        },
      },
      itemStyle: {
        borderRadius: 10,
        borderColor: '#003C7A',
        borderWidth: 3,
      },
      data: data2,
    },
  ],
};

需求2 解决方案：上面的代码已经展示出了中心位置的标题，改变的是 series 中的 label 配置，但是中心显示文字和扇形区域显示数据都是通过label配置来实现的，echarts不允许在一个对象里相同配置项（如label）出现两次，所以我们要分成两个对象，使其重叠来实现既显示中心文字又显示扇形数据的效果，如下代码，具体内容都已附上注释，请自行查看。

悬浮扇形区域放大展示效果是通过配置 emphasis 来实现的（即高亮状态样式设置）。

（上述options中）series部分代码修改为如下：

series: [
  {
    name: '事件总数',
    type: 'pie',
    radius: [40, 62],
    center: ['50%', '30%'],
    // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
    label: {
      show: true,
      normal: {
        formatter: (params) => {
          // 此项的name值，这里即 “事件总数”
          return params.seriesName;
        },
        // 标签位置在饼图的中心
        position: 'center',
        color: 'white',
      },
    },
    // 图形样式
    itemStyle: {
      borderRadius: 10,
      borderColor: '#003C7A',
      borderWidth: 3,
    },
    data: data1,
  },
  {
    name: '事件总数',
    type: 'pie',
    radius: [40, 62],
    center: ['50%', '30%'],
    label: {
      show: true,
      normal: {
        // {c} 代表数据值 其他模板变量可在此链接中自行查阅：https://echarts.apache.org/zh/option.html#series-pie.label.formatter
        formatter: '{c}',
        // 标签位置在饼图扇区内部 也可用 ‘inside’
        position: 'inner',
        color: 'black',
      },
    },
    emphasis: { // 高亮状态的扇区和标签样式
      label: {
        show: true,
        fontSize: '22',
        fontWeight: 'bold'
      }
    },
    itemStyle: {
      borderRadius: 10,
      borderColor: '#003C7A',
      borderWidth: 3,
    },
    data: data1,
  },
  {
    name: '逾期事件',
    type: 'pie',
    radius: [40, 62],
    center: ['50%', '70%'],
    label: {
      show: true,
      normal: {
        formatter: (params) => {
          return params.seriesName;
        },
        position: 'center',
        color: 'white',
      },
    },
    itemStyle: {
      borderRadius: 10,
      borderColor: '#003C7A',
      borderWidth: 3,
    },
    data: data2,
  },
  {
    name: '逾期事件',
    type: 'pie',
    radius: [40, 62],
    center: ['50%', '70%'],
    label: {
      show: true,
      normal: {
        formatter: '{c}',
        position: 'inner',
        color: 'black',
      },
    },
    emphasis: {
      label: {
        show: false,
        fontSize: '22',
        fontWeight: 'bold'
      }
    },
    itemStyle: {
      borderRadius: 10,
      borderColor: '#003C7A',
      borderWidth: 3,
    },
    data: data2,
  },
]