Echarts-clic fuera del área del gráfico circular

1. Por defecto, los datos de la segunda parte están relacionados con el gráfico de la primera parte. Cuando se hace clic en el gráfico circular, se filtran los datos de la segunda parte. Sin embargo, al cancelar el efecto de clic de todos los gráficos circulares, debe restaurar todos los datos en la segunda parte. No encontré el evento que puede hacer clic en cancelar fuera del gráfico circular, así que hice la siguiente manera de hacer esto Efecto: (Este efecto solo es aplicable a teléfonos móviles)

Segundo, el código: (El código en la primera parte es el núcleo, y el código detrás es el apéndice de datos. El principio de implementación es agregar un evento click al elemento que envuelve echarts. Pruebe el clic del gráfico circular cuando no se hace clic en el gráfico circular El evento no se activará, y cuando se haga clic en el gráfico circular, se activarán tanto el gráfico circular como el cuadro envuelto. Todos usan clickFlag para hacer una distinción, porque no se cancela el burbujeo de eventos cuando se hace clic en el gráfico circular. Todo solo se puede resolver de esta manera mediante el método "Qiao")

import React, { useEffect, useRef, memo } from 'react';
import * as ECharts from 'echarts';
import setOption from 'components/Residential/Piechart/setOption';
import './index.less';
const PieChart = memo((props) => {
  const chartDom = useRef(null);
  let searchCode = props.searchCode; // 此函数是用来处理第二部分的数据的
  let clickFlag = 1; // 此标记就是用来做饼状图之外的空白区域点击的
  useEffect(() => {
    const chartTarget = ECharts.init(chartDom.current);
    chartDom.current.onclick = () => {
      if (clickFlag) {
        searchCode(); // 这里将第二部分的所有数据再还原回去
      } else {
        clickFlag = 1;
      }
    };

    let obj = {
      type: 'highlight',
      dataIndex: 0
    };
    chartTarget.on('click', (e) => {
      clickFlag = 0;
      e.event.event.stopPropagation();
      obj.dataIndex = e.dataIndex; // 点击切换选中效果
      searchCode(e.data.name);
    });
    chartTarget.dispatchAction(obj);
    chartTarget.setOption(setOption(props.option));
  }, [props.option]);

  return <div className="pie-chart-container" ref={chartDom} />;
});
export default PieChart;

El código importante para que el padre use este componente:

<PieChart option={examineData} searchCode={this.codeFilter} />

// 点击饼状图的筛选
  codeFilter = (code) => {
    const { allData } = this.state;
    // 取消选中
    if (!code) {
      this.setState({
        dataArr: [...allData]
      });
      return;
    }

    // 筛选后的数据
    let data = allData.filter((item) => {
      return item.classTypeName === code;
    });
    this.setState({
      dataArr: data
    });
  };

// examineData = [{
		orgCode: "ZZYL"
		orgName: "郑州医院"
		reportFormNo: "20190318"
		classTypeCode: "689"
		classTypeName: "病理"
		examPerformerDtime: "2019/12/17"
		reportTitle: "US - Left Knee"
		examSiteCode: "UUR-BB15326"
		examSiteName: "Left Knee"
		participantDept: "骨科"
		reportCreateDtime: "2019/12/19"
		suggestion: "早睡，早起，锻炼身体，吃早饭"
		imageDescr: "胸廓对称，气管居中，双肺未见异常密度影，肺纹理清晰，肺门无增大，心影不大，双侧膈面光滑，肋膈角锐利。"
		conclusion: "结肠癌术后改变，直肠乙状结肠交界处管腔未见狭窄，乙状结肠、降结肠走行区肠管管腔略窄，管腔尚通畅，请结合临床。"
		imageFileUrl: null
		keyNo: "20190318"
		fileGid: ""
		examPurpose: "白细胞检查"
		patientConditionDescr: "结肠癌术后改变，直肠乙状结肠交界处管腔未见狭窄，乙状结肠、降结肠走行区肠管管腔略窄，管腔尚通畅，请结合临床。"
		outpatDiagName: null
		examDeviceName: "血糖仪"
		examDeviceType: "56785"
		examDevice: "568568"
		authenticatorName: "王祥"
		authorName: "张前"
	}]

setOption.js

const setOption = function(data = []) {
  const xArr = [];
  const yArr = [];
  data.forEach((item) => {
    xArr.push(item.filterName);
    yArr.push({ value: item.number, name: item.filterName });
  });
  return {
    legend: {
      orient: 'horizontal',
      bottom: '5px',
      data: xArr
    },
    // color: ['#45A3FF', '#FC617B', '#F6D346', '#8563FF'],
    series: [
      {
        name: 'value',
        hoverAnimation: true,
        hoverOffset: 10,
        type: 'pie',
        radius: '55%',
        center: ['50%', '40%'],
        data: yArr,
        label: {
          normal: {
            formatter: '{d}%',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '16px'
            }
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
};
export default setOption;