echarts实现中国地图轮播省份地图（vue）

代码如下：

<div class="map-container">
     <div ref="chinaMap" id="chinaMap"></div>
</div>

<script>
import * as echarts from 'echarts'
import china from '../../../assets/json/china.json'
export default {
    data() {
        return {
            myChart: null,
            myTime: '',
        }
    },
    mounted() {
        window.exposedGoPath = (data)=> {
            this.$router.push({
                name: 'classification',
                params: {
                    areaType: data
                }
            })
        }
        window.addEventListener("resize", () => {
            this.myChart.resize();
        });
        echarts.registerMap('china', china)
        this.initEchartMap()
    },
    methods: {
        initEchartMap(){
            let areaLists = this.areaLists
            let maxValue = 0
            let maxObj = null
            for (let i = 0; i < areaLists.length; i++) {
                if (areaLists[i].value > maxValue) {
                    maxValue = areaLists[i].value;
                    maxObj = areaLists[i];
                }
            }
            let domEcharts = document.querySelector('#chinaMap')
            if(domEcharts) {
                this.myChart = echarts.init(domEcharts);
            }
            var options= {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    enterable: true,
                    transitionDuration: 1,
                    textStyle:{
                        color:'#000000',
                        fontSize:13
                    },
                    extraCssText: `
                        min-width: 284px;
                        min-height: 212px;
                        border-radius: 0;
                        background: url(${require('../../../assets/frame/images/pic_frame.png')}) no-repeat center center;
                        background-size: 100% 100%;
                        padding: 30px;
                        box-sizing: border-box;
                    `,
                    formatter: (params)=> {
                        if (!params.data) return '';
                        const { titleStr, tm, yw, cnt } = params.data;
                        const commonStyles = `
                            .item-p {
                                text-align: center;
                                background: url(${require('../../../assets/frame/images/pic_gezi.png')}) no-repeat center center;
                                background-size: 100% 100%;
                                font-family: HCBBXJ-2019;
                                color: #333333;
                            }
                            .item-77 {
                                width: 77px;
                                height: 77px;
                                line-height: 74px;
                                font-size: 59px;
                            }
                            .item-55 {
                                width: 55px;
                                height: 55px;
                                line-height: 55px;
                                font-size: 40px;
                            }
                            .data-container span {
                                font-size: 16px;
                                line-height: 30px;
                            }
                            .btn-link {
                                width: 64px;
                                height: 24px;
                                background: #378398;
                                margin: 6px 0 0 10px;
                                padding: 2px 18px;
                                box-sizing: border-box;
                                cursor: pointer;
                            }
                            .btn-link img {
                                width: 28px;
                                height: 12px;
                                margin: 0 auto;
                            }
                        `;
                        let itemsHtml = '';
                        if (titleStr && titleStr.length > 0) {
                            const itemClass = titleStr.length < 3 ? 'item-77' : 'item-55';
                            itemsHtml = titleStr.map(item => `
                                <p class="item-p ${itemClass}">${item}</p>
                            `).join('');
                        }
                        const context = `
                            <style>${commonStyles}</style>
                            <div style="display: flex;">
                                <div>${itemsHtml}</div>
                                <div style="width: calc(100% - 147px); height: 100%; margin-left: 10px">
                                    <div class="data-container">
                                        <div><span>【目录数】</span><span>${tm}</span></div>
                                        <div><span>【原文数】</span><span>${yw}</span></div>
                                        <div><span>【检索数】</span><span>${cnt}</span></div>
                                        <div><span>【村庄数】</span><span>${cnt}</span></div>
                                    </div>
                                    <div class="btn-link" onclick="exposedGoPath('${params.name}')">
                                        <img src="${require('../../../assets/frame/images/arrows.png')}" alt="">
                                    </div>
                                </div>
                            </div>
                        `;
                        return context;
                    },
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: maxObj && maxObj.value,
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#aed1db', '#215b6b']
                    }, 
                },
                geo: {
                    map: "china",
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.3,
                    top: 120,
                    layoutSize: "100%", //保持地图宽高比
                    label: {
                        normal: {
                            show: true,
                            fontSize: "14",
                            color: "rgba(0,0,0,0.7)"
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#FFF'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#FFF",
                            areaColor: '#aed1db',
                        },
                        emphasis: {
                            areaColor: "#ffdf33",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    },
                    regions: [
                        {
                            name: "南海诸岛",
                            itemStyle: {
                            // 隐藏地图
                            normal: {
                                opacity: 0, // 为 0 时不绘制该图形
                            }
                            },
                            label: {
                                show: false // 隐藏文字
                            }
                        }
                    ]
                },
                series: [
                    {
                        name: "地图",
                        type: "map",
                        geoIndex: 0,
                        data: areaLists
                    }
                ]  
            }
            this.myChart && this.myChart.setOption(options);
            var count = 0;
            var timeTicket = null;
            var dataLength = options.series[0].data.length;
            timeTicket && clearInterval(timeTicket);
            timeTicket = setInterval(()=> {
                this.myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                });
                this.myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: (count) % dataLength
                });
                this.myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: (count) % dataLength
                });
                count++;
            }, 1000);

            this.myChart.on('mouseover', (params)=> {
                clearInterval(timeTicket);
                this.myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0
                });
                this.myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
                this.myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: params.dataIndex,
                });
            });
            this.myChart.on('mouseout', (params)=> {
                timeTicket && clearInterval(timeTicket);
                timeTicket = setInterval(()=> {
                    this.myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                    });
                    this.myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: (count) % dataLength
                    });
                    this.myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: (count) % dataLength
                    });
                    count++;
                }, 2000);
            });
        },
    },
}
</script>