饼图默认高亮效果，鼠标移走保持高亮

import BBDPie from 'Components/echarts/BBDPie.jsx';
import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';
import styles from '../enterpriseSituation.less';
import { isNotEmpty } from 'Utils/common.js';
import Line from './images/line.png';
import Group from './images/group.png';
import echarts from 'echarts';
import VerticalBarChart from 'Components/echarts/VerticalBarChart';
import {  industry } from '../services.js';
import { render } from 'react-dom';
let instance;
const CountBar = () => {
    const [option, SetOption] = useState(null);
    const [echartData, SetechartData] = useState([]);
    const [hoverData, SetHoverData] =  useState(null);
    const [loading, SetLoading] = useState(false);
    const [beforeLight, SetBefore] = useState();
    useEffect(() => {
        getBarData();
    }, []);
    function setOption(echartData) {

        let option = {
            colors: ['#6D77DA', '#1C70E3', '#8CC6FC', '#F86476', '#8CC6FC', '#28C75F'],
            legend: {
                orient: 'horizontal',
                // top: 'auto',
                bottom: 70,
                itemGap: 15,
                left: 'center',
                selectedMode: true,
                data: echartData.map(p => p.name),
                textStyle: {
                    color: '#ffffff',
                    fontSize: 14

                },
                tooltip: {
                    show: true,
                    formatter: (params) => {
                        let total = echartData.reduce((tatal, current, index, arr) => {
                            return  current.value + tatal;
                        }, 0);
                        let value;
                        echartData.map((p, index) => {if (p.name === params.name) {value =  p.value;}});
                        let percent = (value / total * 100).toFixed(2);
                        // 和窗口联动
                        SetHoverData({ data: { name: params.name, value }, percent });
                        // 当检测到鼠标悬停事件，取消默认选中高亮
                        instance.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: beforeLight
                        });
                        // 高亮显示悬停的那块
                        instance.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: echartData.map(p => p.name).indexOf(params.name)
                        });
                    }
                }
            },
            tooltip: {
                show: true,
                backgroundColor: 'transparent',
                formatter: (params) => {
                    return '';
                }
            },
            series: [{
                type: 'pie',
                radius: ['25%', '38%'],
                center: ['29%', '35%'],
                data: echartData,
                itemStyle: {
                    normal: {
                        borderColor: 'transparent',
                        borderWidth: 2
                    }
                }, 
                emphasis: {
                    label: {
                        show: true,
                        rich: {
                            img: {
                                width: 81,
                                height: 15,
                                backgroundColor: {
                                    image: require('./images/group.png')
                                }
                            }
                        },
                        formatter: (params) => {
                            return `${params.percent}% \n {img|}`;
                        },
                        fontSize: 24,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                label: {
                    show: false,
                    position: 'center'
                }
            }]
        };
        return option;
    }
    const getBarData = () => {
        SetLoading(true);
        industry().then(
            rem => {
                SetLoading(false);
                isNotEmpty(rem) && rem.map(
                    p => {
                        p['name'] = p['key'];
                        return p; 
                    }
                );
                SetOption(setOption(rem));
                SetechartData(rem);
                let total = rem.reduce((tatal, current, index, arr) => {
                    return  current.value + tatal;
                }, 0);
                let percent = (rem[0].value / total * 100).toFixed(2);
                // 默认展示第一个行业的百分比
                SetHoverData({ data: rem[0], percent });
            }
        ).catch(
            () => {
                SetLoading(false);
            }
        );
    };
    const mouseover = (e, echartObj) => {
        SetHoverData(e);
        // 当检测到鼠标悬停事件，取消默认选中高亮
        echartObj.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: beforeLight
        });
        // 高亮显示悬停的那块
        echartObj.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
        });
    };
    // 检测鼠标移出后显示之前默认高亮的那块
    const mouseout = (e, echartObj) => {
        SetBefore(e.dataIndex);
        // echartObj.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: e.dataIndex
        // });
    };
    // 默认展示hover 效果
    const getChartObjs = (e) => {
        e.dispatchAction({
            type: 'showTip',         
            seriesIndex: 0,
            dataIndex: 0     
        });
        e.dispatchAction({
            type: 'highlight',         
            seriesIndex: 0,
            dataIndex: 0     
        });
       
    };
   
    const getInstance = obj => {
        instance = obj;
    };
    return ( 
        <Spin  spinning={loading}   >
            <div style={{ width: 460, height: 482  }} className={styles.industryPie}>
                {
                    option && !loading ?
                        <React.Fragment>
                            <BBDPie 
                                option={option}
                                onEvents={{ 'mouseover': mouseover, 'mouseout': mouseout }}
                                getChartObj={getChartObjs}
                                getInstance={getInstance}
                            />
                            <div  className= {styles.message}>
                                {
                                    isNotEmpty(hoverData) && <div className={styles.hoverBlock}>
                                        <p  className={styles.name}>{hoverData.data.name}</p>
                                        <img src={Line}></img>
                                        <p  className={styles.data}>{hoverData.data.value}</p>
                                        <p  className={styles.text}>占比{hoverData.percent  + '%'}</p>
                                    </div>
                                }
                            </div>
                        </React.Fragment>
                        :
                        ''
                }
                
            </div>
        </Spin>
    );
};
 
export default CountBar;

效果图