一組圖例控制兩個圖形 && 一個餅圖中既顯示中心文字又顯示數值

需求描述：

如下圖所示

1. 我們希望通過控制最上方的一組圖例，來實現兩個餅圖對應項同時的顯示或隱藏；

2. 在一個餅圖中，我們希望中心位置一直顯示該餅圖的標題，同時扇形區域上顯示對應模塊的數值，鼠標懸浮時再具體顯示相關內容。

 解決方案（代碼展示）：

需求1 解決方案：只需初始化一個 echarts 實例，實例中正常寫入一個legend 對象，但是 series 數組需要加入“事件總數”和“逾期事件”兩個對象，再通過位置的調整，即可實現一組圖例控制兩個餅圖。

此時的效果圖：

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,
  },
]

上述數據部分為 data1 和 data2，legend 的值也包含在其中了，是調取接口進行處理后的數據，這里就不具體展示了，各位根據后台接口返的數值做相應的處理就好啦~ 上述修改完成后，即可實現第一張圖的效果啦~

上面代碼是此需求餅圖 option 部分配置的全部內容，其他如初始化 echarts 實例、數據處理、setOption 等相信大家都會，也就不再贅述。

希望這篇文章能為你提供一些幫助~~~