中国地图tooltip轮播以及点击tooltip进行页面跳转

tooltip轮播点击进行页面跳转

废话不说，直接上代码

<div id="ChartsChina" ref="ChartsRef" style="width:1000px;height:800px"></div>
import 'echarts/map/js/china'
import "echarts/lib/chart/map";
var myChart = echarts.init(this.$refs.ChartsRef);
option = {
   
   
    tooltip: {
   
   
        trigger: 'item',
        formatter: function(params) {
   
   

            if (params.data != 'undefined' && params.data.hasOwnProperty('jgCODE')) {
   
   
                // console.log('1111',params);
                // 提示框内容
                // 点击提示框页面跳转
                // 页面路由跳转以及传参 

                return `
                      <a target="_Blank" href="www.baidu.com?id=${
     
     params.data.c}" style="text-decoration:none">
                            <div  style="font-size: 13px;height: 17px;line-height: 17px;color: #fff;text-align: center;">${
     
     params.data.name}</div>
                            <div  style="height: 30px; line-height: 30px; font-size: 15px;display: flex;align-items: center;color:#fff">
                                <i style="border-radius: 50%;width: 15px; height: 15px;background-color: #fff;margin:0  5px;background-color: green;"></i>
                                a的数据:${
     
     params.data.a}
                            </div>
                            <div  style="height: 30px; line-height: 30px;font-size: 15px; display: flex;align-items: center;color:#fff">
                                <i style="border-radius: 50%;width: 15px;height: 15px;background-color: #fff;margin:0  5px;background-color: red;"></i> 
                                b的数据:${
     
     params.data.b}
                            </div>
                      </a>
                    `
            }
        },
        //提示框是否交互
        enterable: true,
        // 提示框点击显示
        triggerOn: 'click',
        //内编剧
        padding: [0],
        //提示框的样式
        extraCssText: 'width: 150px;height: 78px;' +
            'background-color: blue;' // +'background: url('+require('../assets/indexbg.png')+');'自己提示框的背景图或者背景色
            +
            'border-radius: 0; border: 1px solid #000;' +
            'background-size: 100% 100%; background-repeat: no-repeat;'
    },

    geo: {
   
   
        map: "china",
        show: true,
        // //是否开启鼠标缩放和平移漫游。
        roam: false,
        // //当前视角的缩放比例。
        zoom: 1.2,
        // //图形上的文本标签，
        label: {
   
   
            show: false,
            color: 'red',
            fontSize: '20'

        },
        // // // 地图的大小，见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。
        layoutSize: 100,
        // // //这个是高亮边框
        itemStyle: {
   
   
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
   
   
                offset: 0,
                color: '#00F6FF'
            }, {
   
   
                offset: 1,
                color: '#53D9FF'
            }], false),
            borderWidth: 5,
            shadowColor: 'rgba(10,76,139,1)',
            shadowOffsetY: 0,
            shadowBlur: 60
        }
    },
    series: [
        //给地图填充颜色
        {
   
   
            name: "地图",
            type: "map", //地图种类
            map: "china", //地图类型。
            // data: this._mapData,
            zoom: 1.2, //放大比例
            label: {
   
   
                //图形上的文本标签，可用于说明图形的一些数据信息
                show: false
            },
            // 每个省份的颜色
            itemStyle: {
   
   
                areaColor: {
   
   
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
   
   
                            offset: 0,
                            color: '#073684' // 0% 处的颜色
                        },
                        {
   
   
                            offset: 1,
                            color: '#061E3D' // 100% 处的颜色
                        }
                    ],
                },
                borderColor: '#215495',
                borderWidth: 1,
            },
            // 鼠标移动到每个省份高亮的颜色属性的等设置
            emphasis: {
   
   
                itemStyle: {
   
   
                    areaColor: {
   
   
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
   
   
                            offset: 0,
                            color: '#073684' // 0% 处的颜色
                        }, {
   
   
                            offset: 1,
                            color: '#061E3D' // 100% 处的颜色
                        }],
                    },
                    // borderColor: 'red',
                },
                label: {
   
   
                    show: true,
                    color: '#fff'
                }

            },
        },
        {
   
   
            type: 'scatter',
            name: '散点',
            // 使用的坐标轴
            coordinateSystem: 'geo',
            // 层级
            zlevel: 3,
            itemStyle: {
   
   
                normal: {
   
   
                    color: '#1DE9B6',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            symbolSize: 10,
            // 选中