echart创建中国地图、省份地图

知识点：
1.获取地区json数据：地理小工具

2.如果想特殊显示某个地区，但是json文件里面没有这个地区，可以直接在地理小工具里面复制出这个地区的json，按照格式复制进去就可以了

3.地图点击获取经纬度

 //点击事件
    this.myChart.on("click", (param) => {
      let data = this.myChart.convertFromPixel("geo", [
        param.event.offsetX,
        param.event.offsetY,
      ]);
      console.log(data);//可以知道点击的具体坐标位置
      // this.$emit("clickMap", params);
    });

完整代码：

<template>
  <div
    class="mapChart"
    id="cqChart"
    :style="`width:100%;height:${height}`"
  ></div>
</template>

<script>
import china from "./china2.json";
import * as echarts from "echarts";
export default {
  name: "cqChart",
  props: {},
  data() {
    return {
      height: "",
      myChart: null,
    };
  },

  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  activated() {
    this.myChart.resize();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("cqChart"));
    this.myChart.on("click", (param) => {
      //点击事件
      let data = this.myChart.convertFromPixel("geo", [
        param.event.offsetX,
        param.event.offsetY,
      ]);
      console.log(data);//可以知道点击的具体坐标位置
      // this.$emit("clickMap", params);
    });
    echarts.registerMap("泸州市", china);
    this.setOption();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.height = window.innerHeight - 280 + "px";
    },
    setOption() {
      let series = [];
      series.push(this.getSerise());//散点标记
      series.push(this.getSeriseLine());//画线
      let myChart = this.myChart;
      let option = {
        geo: {
          map: "泸州市",
          // roam: "scale", //只开启缩放
          zoomSensitivity: false,
          center: [105.703348, 28.109138], //中心坐标
          itemStyle: {
            areaColor: "rgba(0,0,0,0)",
            borderColor: "#0b827e",
            borderWidth: 2,
          },
          regions: [//高亮显示
            {
              name: "泸州市", //这个名字要和china.js保持一致
              itemStyle: {
                normal: {
                  areaColor: "#0f6f91", // 背景颜色
                  borderColor: "#f0f",
                  borderWidth: 1, // 边框宽度
                  shadowBlur: 3, // 阴影泛化程度
                  borderWidth: 0, //描边线宽。为 0 时无描边
                  shadowOffsetX: 3, //阴影水平方向上的偏移距离
                  shadowOffsetY: 3, //阴影垂直方向上的偏移距离
                },
              },
            },
          ],
          zoom: 7, //视角缩放比例//72
          label: {
            show: true,
            formatter: function (params) {
              let item = null;
              if (params.name == "泸州市") {//只显示泸州市名称
                let name = params.name;
                 return `{a|${name}}`
              }
              return "";
            },
            fontSize: "10",
            color: "#fff",
            lineHeight: 20,
            rich: { a: { fontSize: 16 } },
          },
          emphasis: {
            disabled: true,
            itemStyle: {
              areaColor: "red", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        tooltip: {},
        series: series,
      };

      myChart.setOption(option);
    },
    getSerise() {
      let list = [
        {
          name: "河源",
          value: [105.42678508916828, 27.95926151571386],
          id: 3,
          type: "pie",
        },
        {
          name: "云山坝集气站",
          value: [105.34318636249864, 28.097542971129727],
          id: 3,
          type: "flag",
        },

      ];
      let data = {
        type: "scatter",
        map: "china",
        coordinateSystem: "geo",
        zlevel: 10,
        data: list,
        tooltip: {
          formatter(d) {},
        },
        symbolSize: 0,
        position: "top",
        label: {
          show: true,
          formatter: (params) => {

              return (
                "{" + params.data.type + "|}{cValue|" + params.data.name + "}"
              );
            
          },
          // lineHeight: 20,
          position: "inside",
          padding: [1, 3, 1, 3],
          color: "#ffffff",
          fontSize: 13,
          fontWeight: "normal",
          rich: {
            pie: {
              lineHeight: 35,
              height: 20,
              width: 20,
              backgroundColor: {
                image:
                  "https://cdn.minexiot.com/bigscreen/datav-img/c.png",
              },
              borderWidth: 1,
              verticalAlign: "middle",
              align: 'center',
              lineHeight:25,
            },
            flag: {
              height: 25,
              width: 25,
              backgroundColor: {
                image: "https://cdn.minexiot.com/bigscreen/datav-img/hq2.png",
              },
              borderWidth: 1,
              verticalAlign: "middle",
              align: "center",
            },
            cValue: {
              color: "#fff",
              padding: [3, 3, 0, 3],
              align: "center",
              fontSize: 14,
              // lineHeight: 35,
              // backgroundColor: "yellow",
            },
          },
        },
      };
      return data;
    },
    getSeriseLine() {
      let list = [
        {
          point: ["浙油", "西湖变"],
          coords: [
          [105.50721546227007, 28.109538815812808],
          [105.53928072729404, 28.128777974827187],
          ],
        },
        {
          point: ["浙油", "大树"],
          coords: [
          [105.50461015948687, 28.09786505526501],
          [105.51042198877246, 28.07506865591204],
          ],
        },
      ];
      let data = {
        name: "",
        type: "lines",
        zlevel: 6,
        lineStyle: {
          type: "dashed",
          width: 2,
          opacity: 1,
          curveness: 0,
          orient: "horizontal",
          color: "#fff",
        },
        show: true,
        data: list,
        tooltip: {
          formatter(d) {},
        },
      };
      return data;
    },
  },
};
</script>

<style  lang="scss" scoped>
</style>