echarts地图tooltip自动轮播，react

参考地址：https://blog.csdn.net/zhaolinru/article/details/90480045

使用 echarts-for-react组件，使用echart轮播高亮

1、定义全局变量

var index = 0; //播放所在下标
let mychart; 

2、设置mychart

// echarts-for-react组件只有一个API   getEchartsInstance
// 调用之后，mychart就可以使用echart的API了
// this.echartsReact是echarts-for-react组件的ref，完整代码中有
componentDidMount(){
    echarts.registerMap('山东', this.state.geoJson);

    mychart =  this.echartsReact.getEchartsInstance()
    this.autoTooltip()
}

3、轮播方法 dispatchAction

官网链接：https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

// tooltip轮播
    autoTooltip = () => {
        const dataLength = this.props.mapData.length;
        const _this = this;
        setTimeout(function() {
            mychart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            });
            index++;
            if(index >= dataLength) {
                index = 0;
            }
            _this.autoTooltip();
        }, 2000);
        
    }

4、完整代码

import React from 'react'
import style from '../index.less'
import echarts from 'echarts';
import ReactEcharts from "echarts-for-react";
import geoJson from 'echarts/map/json/province/shandong'
import mapTootipbg from '../../../assets/MedicalServers/mapTootipbg.png'
import mapTootipTitleBg from '../../../assets/MedicalServers/mapTootipTitleBg.png'
const geoCoordMap = {}
var index = 0; //播放所在下标
let mychart;
geoJson.features.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;

});
let myChart = {};

class MapChart extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            currentMap: 0,
            geoJson: geoJson,
            mapName: '山东',
            mapProData: [],
        }
        this.echartsReact = React.createRef()
    }
    componentDidMount(){
        echarts.registerMap('山东', this.state.geoJson);

        mychart =  this.echartsReact.getEchartsInstance()
        this.autoTooltip()
    }
    // tooltip轮播
    autoTooltip = () => {
        const dataLength = this.props.mapData.length;
        const _this = this;
        setTimeout(function() {
            mychart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            });
            index++;
            if(index >= dataLength) {
                index = 0;
            }
            _this.autoTooltip();
        }, 2000);
        
    }
    getOption = () => {
        const option = {
            tooltip: {
                show: true,
                backgroundColor:'transparent',
                textStyle:{
                    color:'#fff',
                    fontSize:10,
                    height:25,
                    lineHeight:25
                },
                formatter: function (obj) {
                    var value = obj.data.value;
                    return `<div style="background:url(${mapTootipbg}) no-repeat;background-size:100% 100%;width:210px;height:160px;padding:10px 20px;">
                                <div style="background:url(${mapTootipTitleBg}) no-repeat;background-size:100% 100%;width:132px;height:20px;padding-left:20px">
                                    ${obj.name}
                                </div>
                                xxx次数： ${value[0]} 人次<br>
                                xxx人次： ${value[1]} 人次<br>
                                xxxx人次： ${value[2]} 人次<br>
                                xxxxx人次： ${value[3]} 人次<br>
                                xxxxx费用： ${value[4]} 元<br>             
                            </div>`
                            
                    }
            },
            visualMap: {
                type: 'continuous',
                text: ['人次', ''],
                showLabel: true,
                right: '10',
                min: 0,
                max: 100000,
                inRange: {
                    color: ['#006EFF','#00FFA8','#FFD800', '#FF4300']
                },
                splitNumber: 0,
                itemWidth:14,
                itemHeight:64,
                align:'left',
                textStyle:{
                    color:'#fff'
                },
                calculable:true
            },
            geo: {
                show: true,
                map: this.state.mapName,
                roam: false,//是否开启鼠标缩放和平移漫游
                label: {
                    emphasis: {
                        show: false //城市模式下，鼠标移上去不显示省份名称
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#eeeeee',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#00a695',
                    }
                }
            },
            series: [{
                name: '山东省',
                type: 'map',
                mapType: this.state.mapName,
                itemStyle: {
                    normal: { 
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                },
                data: this.props.mapData
            }]
        }
        return option
    }
   
    render(){
        // let onEvents = {
        //     'onload': this.onChartOnload,
        // };
        echarts.registerMap('mapName', this.state.geoJson);
        return(
            <ReactEcharts
                ref={(e) => { this.echartsReact = e }}
                option={this.getOption()}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: "100%", marginRight: "85px", width: '100%' }}
                // onEvents={(onEvents)}
            />
        )
    }
}
export default MapChart

5、图示