vue项目 echarts广东地图点击市区显示对应它的各个区，展示区域。

<template>
  <div ref="chartView" class="chart-panel"></div>
</template>
 
<script>
import echarts from "echarts";
import "echarts-gl";
import { cityPoints } from "./mapData/mapCity";
import { listByParentName } from "@/api/system/grid";
import { deptList } from "@/api/cockpit/cockpit";
import resize from "../components/mixins/resize";
import { listDistrict } from "@/api/system/district";
 
require("echarts/theme/macarons"); // echarts theme
export default {
  mixins: [resize],
 
  components: {},
 
  props: {
    cityData: {
      type: Array,
      default: () => [],
    },
    areaType: {
      type: String,
      default: () => "省级",
    },
    type: [String, Number],
  },
 
  data() {
    return {
      chartData: [],
      curCityName: "",
      chartView: null,
      overCityName: "",
      // 下转到城市
      corssCity: "",
    };
  },
  computed: {},
  async mounted() {
    this.initChartBase("广东省");
  },
 
  methods: {
    /**
     * 图形大小更改
     * */
    async refresh() {
      if (this.chartView) {
        this.chartView.resize();
      }
    },
    initChart(areaName, myCity) {
      // debugger
      this.chartData = this.$parent.cityData;
      let citys = [];
      let mapSize = 120;
      if (areaName == "广东省") {
        this.chartData.forEach((item) => {
          myCity.features.forEach((jtem) => {
            if (jtem.properties.name.indexOf(item.city) > -1) {
              let point = jtem.properties.cp;
              citys.push({
                name: item.city,
                value: [point[0] - 0.25, point[1]],
              });
            }
          });
          let point = cityPoints[item.city];
        });
      } else {
        if (areaName == "湛江市" || areaName == "广州市") {
          mapSize = 200;
        } else {
          mapSize = 150;
        }
        if (areaName !== "东莞市" && areaName !== "中山市") {
          try {
            this.chartData.forEach((item) => {
              myCity.features.forEach((jtem) => {
                if (jtem.properties.name.indexOf(item.city) > -1) {
                  let point = jtem.properties.cp;
                  citys.push({ name: item.city, value: [point[0], point[1]] });
                }
              });
              // let point=cityPoints[item.city];
            });
          } catch (error) {}
        }
      }
 
      let that = this;
      if (this.chartView == null) {
        this.chartView = echarts.init(this.$refs.chartView);
      }
      let option = {
        geo3D: {
          show: false,
          map: areaName,
          roam: true,
          zoom: 1,
          zlevel: 1,
          top: -100,
          bottom: -50,
          right: "1%",
          left: "1%",
          /*各个区域线线分隔*/
          itemStyle: {
            color: "rgb(10,119,186)",
            borderWidth: 1, //分界线wdith
            borderColor: "rgb(5,225,253)", //分界线颜色
          },
          /*是否显示标签*/
          label: {
            show: true,
            textStyle: {
              color: "#fff", //文字颜色
              fontSize: 12, //文字大小
              fontWeight: 500,
              padding: [50, 0, 0, 0],
              backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
            },
          },
          emphasis: {
            label: {
              show: true, //是否显示高亮
              textStyle: {
                color: "#FFFF08", //高亮文字颜色
              },
            },
            itemStyle: {
              color: "#2eb6f5", //地图高亮颜色
            },
          },
          viewControl: {
            distance: mapSize, //地图视角 控制初始大小
            rotateSensitivity: 0, //禁止旋转
            zoomSensitivity: 0, //禁止缩放
            center: [0, 0, 0],
          },
        },
        series: [
          {
            type: "map3D",
            map: areaName,
            roam: true,
            zoom: 1,
            zlevel: 1,
            top: -100,
            bottom: -50,
            right: "1%",
            left: "1%",
            /*各个区域线线分隔*/
            itemStyle: {
              color: "rgb(10,119,186)",
              borderWidth: 1, //分界线wdith
              borderColor: "rgb(5,225,253)", //分界线颜色
            },
            /*是否显示标签*/
            label: {
              show: true,
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 12, //文字大小
                fontWeight: 500,
                padding: [50, 0, 0, 0],
                backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
              },
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                formatter: function (params) {
                  // console.log('cc:', params.name)
                  // that.overCityName = params.name;
                  return params.name;
                },
                textStyle: {
                  color: "#FFFF08", //高亮文字颜色
                },
              },
              itemStyle: {
                color: "#2eb6f5", //地图高亮颜色
              },
            },
            viewControl: {
              distance: mapSize, //地图视角 控制初始大小
              rotateSensitivity: 0, //禁止旋转
              zoomSensitivity: 0, //禁止缩放
              center: [0, 0, 0],
            },
          },
          {
            name: "scatter3D",
            type: "scatter3D",
            coordinateSystem: "geo3D",
            zlevel: 8,
            showEffectOn: "render",
            hoverAnimation: false,
            silent: false,
            itemStyle: {
              normal: {
                color: "#EAC52E",
                borderColor: "rgba(233,196,47,0.5)",
                opacity: 1, //点的透明度 1不透明
                borderWidth: 1,
              },
            },
            symbolSize: 0,
            label: {
              position: "top",
              distance: 100,
              normal: {
                show: true,
                formatter: function (params) {
                  let v = "";
                  that.chartData.forEach((item) => {
                    if (item.city == params.name) {
                      v = item.value;
                    }
                  });
                  return v;
                },
                textStyle: {
                  fontSize: 12,
                  color: "#ffff00",
                  padding: [0, 0, 10, 0],
                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                },
              },
            },
            data: citys,
          },
        ],
      };
      this.chartView.clear();
      this.chartView.setOption(option, true);
      // this.chartView.getZr().off("click");
 
      // this.chartView.getZr().on("mouseout", (params) => {
      //   that.overCityName = ''
      // })
      this.chartView.off('click')
      //点击选中广州市事件
      this.chartView.on('click', params => {
        this.overCityName = params.name
        if (this.curCityName != that.overCityName && that.overCityName) {
          that.initChartBase(that.overCityName);
          this.$parent.getCockpitData(that.overCityName);
          that.overCityName = ''
        }else{
          deptList({deptName:name})
        }
      })
      // this.chartView.getZr().on("click", (params) => {
      //   console.log(params)
      //   if (this.curCityName != that.overCityName && that.overCityName) {
      //     that.initChartBase(that.overCityName);
      //     this.$parent.getCockpitData(that.overCityName);
      //     that.overCityName = ''
      //   }else{
      //     deptList({deptName:name})
      //   }
      // });
    },
 
    //选中之后执行逻辑
    checkedMethod(name) {
      console.log(name, this.isFirstClick);
      if (this.isFirstClick) {
        this.isFirstClick = false;
        if (this.selectedCitys.toString().indexOf(name) == -1) {
          this.selectedCitys.splice(3, 1);
          this.selectedCitys.push(name);
        }
      } else {
        let newCitys = [];
        this.selectedCitys.forEach((item) => {
          if (item != name) {
            newCitys.push(item);
          }
        });
        if (newCitys.length == 4) {
          newCitys.splice(3, 1);
          newCitys.push(name);
        }
        this.selectedCitys = newCitys;
      }
      let op = this.chartView.getOption();
      op.series[0].data.forEach((item) => {
        item.itemStyle = {};
        item.label = {};
        this.selectedCitys.forEach((jtem) => {
          if (jtem == item.name) {
            item.label = { textStyle: { color: "#ffd106" } };
            item.itemStyle = {
              color: "#a1a8ff",
              borderWidth: 3,
            };
          }
        });
      });
      this.chartView.clear();
      this.chartView.setOption(op, true);
      this.checkedCity();
    },
 
    //给父组件传值
    checkedCity() {
      this.$parent.checkedCity(this.selectedCitys);
    },
    changeMapDataType() {
      this.initChartBase(this.curCityName);
    },
    /**
     * 初始化地图基图
     */
    async initChartBase(name) {
      // debugger
      console.log('name: ', name)
      this.curCityName = name;
      let myCity = null;
      if (name == "广东省") {
        myCity = require("./mapData/guangdong.json");
      } else {
        let districts = [];
        try {
          myCity = require("./mapData/city/" + name + ".json");
 
          myCity.features.forEach((jtem, index) => {
            if (index < 10) {
              districts.push(jtem.properties.name);
            }
          });
          this.$parent.changeReturnCity("广东省");
          this.corssCity = name;
        } catch (error) {
          let countyCode = "";
          countyCode = await this.getCountyByName(name);
          districts = await this.getGridByParentName(name);
          myCity = require("./mapData/county/" + countyCode + ".json");
          this.$parent.changeReturnCity(this.corssCity);
        }
        this.$parent.changeCityData(name, districts);
      }
        echarts.registerMap(name, myCity);
 
        this.initChart(name, myCity);
 
    },
 
    // 异步更新父页面的城市数据
    async changeParentCtiyData(name) {
      let districts = await this.getGridByParentName(name);
 
      this.$parent.changeCityData(name, districts);
    },
    // 根据区县名称获取网格数据
    getGridByParentName(name) {
      return listByParentName({ type: name }).then((res) => {
        return res.data;
      });
    },
    getCountyByName(name) {
      let params = {};
      params.level = 3;
      params.name = name;
      return listDistrict(params).then((response) => {
        if (response.rows) {
          return response.rows[0].code;
        }
      });
    },
  },
};
</script>
 
<style lang='scss' scoped>
.chart-panel {
  width: 100%;
  height: 100%;
}
</style>复制