echarts+vue3中国地图

<template>
  <div class="myChart" ref="mychart"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ECharts } from "echarts";
import {ref, getCurrentInstance, ComponentInternalInstance, onMounted, watch} from "vue";
import { ElMessage } from 'element-plus'
import axios from "axios";
// import {provinceMap} from "@/views/Demo/world";
import pinyin from 'js-pinyin'
import {useRoute, useRouter} from "vue-router";
const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(["getBulletinBoard"]);
const {
  appContext: {
    config: {
      globalProperties: {$echarts, $utils},
    },
  },
} = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const router = useRouter();
let currentIndex = ref(0)
let timer = ref()
const mychart = ref();
let echartInstance: ECharts;
let iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="

let data = [{
  name: "北京",
  value: [116.24, 39.55, 100],
},
  {
    name: "深圳",
    value: [114.271522, 22.753644]
  },

  {
    name: "重庆",
    value: [106.54, 29.59]
  },
  {
    name: "南京",
    value: [118.78, 32.04]
  },

]

let mapData = [{
  name: "广东",
  selected: true
},
  {
    name: "安徽",
    selected: true
  },
  {
    name: "北京",
    selected: true
  },
  {
    name: "重庆",
    selected: true
  },
]

let LableData = [{
  name: "北京",
  value: [118.24, 35.55, 100],
  lable: [10, 1]
},
  /* {
       name: "深圳",
       value: [116.271522, 20.753644],
       lable: [10, 1]
   },*/
  {
    name: "重庆",
    value: [108.54, 24.59],
    lable: [10, 1]
  },
  {
    name: "南京",
    value: [118.78, 26.04],
    lable: [10, 1]
  },
];
const provinceMap = {
  '上海': 'shanghai',
  '河北': 'hebei',
  '山西': 'shanxi',
  '新疆':'xinjiang',
  '内蒙古':'neimenggu',
  '西藏':'xizang',
  '青海':'qinghai',
  '甘肃':'gansu',
  '辽宁': 'liaoning',
  '吉林': 'jilin',
  '黑龙江': 'heilongjiang',
  '江苏': 'jiangsu',
  '浙江': 'zhejiang',
  '安徽': 'anhui',
  '福建': 'fujian',
  '江西': 'jiangxi',
  '山东': 'shandong',
  '河南': 'henan',
  '湖北': 'hubei',
  '湖南': 'hunan',
  '广东': 'guangdong',
  '广西': 'guangxi',
  '海南': 'hainan',
  '四川': 'sichuan',
  '贵州': 'guizhou',
  '云南': 'yunnan',
  '陕西': 'shanxi1',
  '宁夏': 'ningxia',
  '北京': 'beijing',
  '天津': 'tianjin',
  '重庆': 'chongqing',
  '香港': 'xianggang',
  '澳门': 'aomen'
};
const initChart = async () => {
  if (!mychart.value) return;
  await axios.get(`/china.json`).then(res => {
    echarts.registerMap('china', res.data);
  });
  echartInstance = echarts.init(mychart.value);
  echartInstance.clear(); //清除旧画布 重新渲染
  echartInstance.off('click')

  let option = {
    // backgroundColor: '#01355e',
    xAxis: [],
    yAxis: [],
    grid:[],
    geo: {
      map: 'china',
      aspectScale: 0.85,
      layoutCenter: ["50%", "50%"], //地图位置
      layoutSize: '140%',

      itemStyle: {
        normal: {
          shadowColor: '#011628',
          shadowOffsetX: 0,
          shadowOffsetY: 15,
          opacity: 0.5,
        },
        emphasis: {
          areaColor: '#011628',

        }
      },
      regions: [{
        name: '南海诸岛',
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',

          borderColor: 'rgba(0, 10, 52, 1)',
          normal: {
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            }
          },


        },
        label: {
          show: false,
          color: '#FFFFFF',
          fontSize: 12,
        },


      }],

    },
    series: [
      // 常规地图
      {
        type: 'map', // 系列类型
        name: 'map', // 系列名称
        mapType: 'china',
        aspectScale: 0.85,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: '140%',
        zoom: 1, //当前视角的缩放比例
        // roam: true, //是否开启平游或缩放
        scaleLimit: { //滚轮缩放的极限控制
          min: 1,
          max: 2
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 12,
        },
        itemStyle: {
          normal: {
            areaColor: '#18909f',
            borderColor: '#1cccff',
            borderWidth: 1.5,
            opacity: 1,

          },
          emphasis: {
            areaColor: '#c9ba19',
            borderColor: '#1cccff',
            borderWidth: 2,
            opacity: 1,
            label: {
              show: false,
              color: "#fff"
            }

          }
        },
      data:mapData
      },
      //首都星图标
      {
        name: '首都',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [{
          name: '首都',
          value: [116.24, 41.55, 100],

        }, ],
        symbol: iconRQ,
        symbolSize: 20,
        label: {
          normal: {
            show: false,

          },
          emphasis: {
            show: false
          }
        },

      },
      // 区域散点图
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        symbolSize: 8,
        rippleEffect: { //坐标点动画
          period: 3,
          scale: 5,
          brushType: 'fill'
        },
        label: {
          normal: {
            show: false,
            position: 'right',
            formatter: '{b}',
            color: '#b3e2f2',
            fontWeight: "bold",
            fontSize: 18
          }
        },

        data: data,
        itemStyle: { //坐标点颜色
          normal: {
            show: true,
            color: '#f5e33f',
            shadowBlur: 20,
            shadowColor: '#7e974a'
          },
          emphasis: {
            areaColor: '#f00'
          }
        },

      },
      // 线 和 点
      {
        type: 'lines',
        zlevel: 1, //设置这个才会有轨迹线的小尾巴
        polyline: true,
        effect: {
          show: true,
          period: 10,
          trailLength: 0.7,
          color: '#ffd800', //流动点颜色
          symbol: 'arrow',
          symbolSize: 6
        },
        lineStyle: {
          normal: {
            color: '#d4d36c', //线条颜色
            width: 1.5,
            curveness: 0.2,
            shadowColor: '#d4d36c',
          }
        },
        data: [{

          fromName: "深圳",
          toName: "北京",
          coords: [
            [114.271522, 22.753644],
            [116.24, 39.55],

          ]
        },
          {

            fromName: "深圳",
            toName: "浙江",
            coords: [
              [114.271522, 22.753644],
              [118.78, 32.04],

            ]
          },
          {
            fromName: "深圳",
            toName: "重庆",
            coords: [
              [114.271522, 22.753644],
              [106.54, 29.59],

            ]
          }
        ],

      },

    ]
  };

  // const tooltipShow = () => {
  //   timer.value && clearTimeout(timer.value)
  //   timer.value = window.setTimeout(() => {
  //     myChart.dispatchAction({//显示tooptip
  //       type: 'showTip',
  //       seriesIndex: 0,//索引值，可触发多个
  //       dataIndex: currentIndex.value,
  //       playState: true,
  //     })
  //     currentIndex.value++;
  //     if (currentIndex.value >= props.data.length) {
  //       currentIndex.value = 0
  //     }
  //     tooltipShow()
  //   }, 1000)
  // }
  // tooltipShow()

  echartInstance.setOption(option);
  echartInstance.on('click', (params) => {
    console.log(params,'params',params.name,provinceMap[params.name])
    // const mapCode = pinyin.getFullChars(params.name).toLowerCase()
    const mapCode = provinceMap[params.name]; //地区的json数据
    console.log('-------mapCode---', mapCode)
    router.push({path:'/provincialSubPage', query: {
        cityName: mapCode
      }})
  })
  window.addEventListener("resize", () => {
    echartInstance.resize();
  });
  // myChart.on('mouseover', () => {
  //   timer.value && clearTimeout(timer.value)
  // })
  // myChart.on('mouseout', (e) => {
  //   currentIndex.value = e.dataIndex;
  //   // tooltipShow()
  // })
}

onMounted(() => {
  initChart()
})

let maxData = ref(0);
watch(() => props.data,
  () => {
    //
    // maxData.value = Math.max.apply(Math, props.data.map(item => item.value))
    initChart()
  }, {deep: true})
</script>

<style lang="scss" scoped>
.myChart {
  width: 100%;
  height: 100%;
}
</style>