echarts饼图点击图例问题

1.场景需求：label默认展示第一个图例数据；当图例全部被点击完，需要保留一组图例数据。

原来当图例全部被点击时，展示的是空

现在要求保留最后一次点击的数据，并展示相应的label

2.关键代码展示

    // 初始化时展示第一个数据的label
    map.dispatchAction({
      type: 'downplay', // 取消高亮
      seriesIndex: maxIndex,
    });
    let maxIndexs = 0;
    for (let index = 1; index < chartData.length; index++) {
      if (chartData[maxIndexs] < chartData[index]) {
        maxIndexs = index;
      }
    }
    setMaxIndex(maxIndexs);
    map.dispatchAction({
      type: 'highlight',
      dataIndex: maxIndexs,
    });

// 鼠标在图例上移动时，展示当前鼠标所在图例的数据
    map.on('mouseover', function (params) {
      map.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      });
      map.dispatchAction({
        type: 'highlight',
        dataIndex: params.dataIndex,
      });
    });

// 点击图例事件
    map.on('legendselectchanged', (params: any) => {
      // 先清空
      map.dispatchAction({
        type: 'downplay',
        seriesIndex: maxIndexs,
      });

      const optionLegend: any = map.getOption();
      const select_value = Object.values(params.selected);
      let n = 0;
      select_value.map((res) => {
        if (!res) n++;
      });
      // 保留最后一个图例数据
      if (n == select_value.length) {
        optionLegend.legend[0].selected[params.name] = true;
      }
      let originIdx = 0;
      originIdx = select_value.findIndex((item) => item === true);
      if (originIdx === -1) {
        originIdx = Object.keys(params.selected).findIndex(
          (item) => item === params.name
        );
      }
      // 展示最后一个图例数据
      map.dispatchAction({
        type: 'highlight',
        dataIndex: originIdx,
      });
      map.setOption(optionLegend);
    });

3.完整代码展示

import { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import React from 'react';

const chartData = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' },
];
const PieCharts: FC = () => {
  const [maxIndex, setMaxIndex] = useState(0);
  useEffect(() => {
    initChart();
  });

  const initChart = () => {
    const pie = document.getElementById('main');
    const map = echarts.init(pie as HTMLDivElement);
    const option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: chartData,
        },
      ],
    };

    map.clear();
    map.setOption(option);
    // 初始化时展示第一个数据的label
    map.dispatchAction({
      type: 'downplay', // 取消高亮
      seriesIndex: maxIndex,
    });
    let maxIndexs = 0;
    for (let index = 1; index < chartData.length; index++) {
      if (chartData[maxIndexs] < chartData[index]) {
        maxIndexs = index;
      }
    }
    setMaxIndex(maxIndexs);
    map.dispatchAction({
      type: 'highlight',
      dataIndex: maxIndexs,
    });
    // 鼠标在图例上移动时，展示当前鼠标所在图例的数据
    map.on('mouseover', function (params) {
      map.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      });
      map.dispatchAction({
        type: 'highlight',
        dataIndex: params.dataIndex,
      });
    });

    // 点击图例事件
    map.on('legendselectchanged', (params: any) => {
      // 先清空
      map.dispatchAction({
        type: 'downplay',
        seriesIndex: maxIndexs,
      });

      const optionLegend: any = map.getOption();
      const select_value = Object.values(params.selected);
      let n = 0;
      select_value.map((res) => {
        if (!res) n++;
      });
      // 保留最后一个图例数据
      if (n == select_value.length) {
        optionLegend.legend[0].selected[params.name] = true;
      }
      let originIdx = 0;
      originIdx = select_value.findIndex((item) => item === true);
      if (originIdx === -1) {
        originIdx = Object.keys(params.selected).findIndex(
          (item) => item === params.name
        );
      }
      // 展示最后一个图例数据
      map.dispatchAction({
        type: 'highlight',
        dataIndex: originIdx,
      });
      map.setOption(optionLegend);
    });
  };

  return <div id='main' style={{ width: 500, height: 500 }} />;
};

export default PieCharts;