需求描述：

如下圖所示

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，是調取介面進行處理後的資料，這裡就不具體展示了，各位根據後臺介面返的數值做相應的處理就好啦~ 上述修改完成後，即可實現第一張圖的效果啦~

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

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