vue

<template>
  <div class="china-map">
    <div ref="ChinaMap" class="china"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { chinaJSON } from "./utils/chinaMap.js";
export default {
  name: "ChinaMap",
  mounted() {
    /* 在echarts中注入中国地图 */
    echarts.registerMap("china1", chinaJSON);
    let ChinaMap = echarts.init(this.$refs.ChinaMap);
    ChinaMap.setOption({
      title: {
        text: "中国轮廓地图",
        top: "3%",
        left: "center",
        textStyle: {
          fontSize: 20,
          fontWeight: 600,
          color: "#fff",
        },
      },
      tooltip: {
        // 触发类型, 数据项图形触发
        trigger: "item",
        backgroundColor: "#fff",
        textStyle: {
          color: "#000",
        },
        /* 可以使用formatter再加上div实现自定义的提示组件 */
        formatter: function (val) {
          return (
            val.data.name +
            '<div>' +
                '<h2><img src="' +val.data.url +'"  height="120px"></h2>' +
                "<p>" +val.data.value +"</p>" +
            "</div>"
          );
        },
      },
      series: [
        {
          type: "map",
          /* 这里的map值需要和registerMap注册的名字相一致 */
          map: "china1",
          roam: true, //是否开启鼠标缩放和平移漫游
          geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: { color: "#fff" }, //省份标签字体颜色
            },
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              textStyle: { color: "#fff" },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 1.95, //区域边框宽度
              borderColor: "#0550c3", //区域边框颜色
              areaColor: "#000", //区域颜色
            },

            emphasis: {
              borderWidth: 1.95, //鼠标滑过区域，区域边框宽度
              borderColor: "#fff", //鼠标滑过区域，区域边框颜色
              areaColor: "#ff6511", //鼠标滑过区域背景色
            },
          },
          data: [
            {
              name: "北京",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "中国帝都",
            },
            {
              name: "上海",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "天津",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "重庆",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "河北",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "山东",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "陕西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "山西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "辽宁",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "吉林",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "黑龙江",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "宁夏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "江苏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "河南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "安徽",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "浙江",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "湖南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "湖北",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "甘肃",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "青海",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "西藏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "新疆",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "内蒙古",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "贵州",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "四川",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "江西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "福建",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "广东",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "广西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "云南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "海南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "香港",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "澳门",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "台湾",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
          ],
        },
      ],
    });
    window.ChinaMap = ChinaMap;
  },
};
</script>

<style scoped>
.china {
  border-radius: 10px;
  height: 500px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.9);
}
.china-map {
  border-radius: 10px;
  background: #000;
}

</style>