echarts 二级下钻地图

echarts 二级下钻地图

<template>
  <div class="map-box">
    <div
      class="echats"
      :id="id"
      :style="`width:${width};height:${height}`"
      v-loading="loading"
    ></div>

    <div class="tools-box">
      <el-button type="" class="back-btn" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import fullJson from "./full.json";
import { getProvenceData, getWordOrChinaData } from "@/api/map";
import province2pinyin from "@/utils/province2pinyin";
// 引入china.json
import china from "./full.json";

export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    width: {
      type: String,
      default: "800px",
    },
    height: {
      type: String,
      default: "800px",
    },
    id: {
      type: String,
      default: "map111",
    },
  },
  data() {
    return {
      loading: true,
      chart: null,
      fullJson: fullJson,
      mapData: {},
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  watch: {
    value() {
      // this.showChart();
    },
  },
  methods: {
    // 返回
    handleBack() {
      this.getChinaData();
    },
    // 获取中国数据
    async getChinaData() {
      let china = await getWordOrChinaData("china");
      echarts.registerMap("china", china);
      let option = {
        series: {
          name: "11",
          type: "map",
          map: "china",
          // data: [
          //   {
          //     name: "河南",
          //     value: "1222",
          //     itemStyle: {
          //       areaColor: "#008cff", // 单个地区的颜色
          //     },
          //   },
          // ],
        },
        // 提示信息
        tooltip: {
          formatter(data) {
            return data;
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(19,198,249,0.45)",
            borderWidth: 1,
            color: "rgba(0,0,0,0)",
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0,0,0,0)",
                },
                {
                  offset: 1,
                  color: "rgba(19,198,249,0.15)",
                },
              ],
              global: false,
            },
            shadowColor: "rgba(19,198,249,1)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 10,
          },
        },
      };
      if (this.chart) {
        this.chart.clear();
        this.chart.setOption(option, true);
      } else {
        this.initChart();
      }
      this.loading = false;
    },

    // 获取省份数据
    async getProvenceData(cname) {
      let provinceName = cname;
      let provinceData = await getProvenceData(cname);
      echarts.registerMap(provinceName, provinceData);
      let option = {
        series: {
          name: provinceName,
          type: "map",
          map: provinceName,
        },
        // 提示信息
        tooltip: {
          formatter(data) {
            return data;
          },
        },
      };
      if (this.chart) {
        this.chart.clear();
        this.chart.setOption(option, true);
      } else {
        this.initChart();
      }
      this.loading = false;
    },
    // 展示图表
    showChart() {
      // 注册地图
      this.getChinaData();
    },
    initChart() {
      let self = this;
      this.chart = echarts.init(document.getElementById(this.id));
      this.showChart();
      this.chart.on("click", function (params) {
        let provinceName = province2pinyin(params.name).toLowerCase();
        self.getProvenceData(provinceName);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.echats {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.back-btn {
  position: absolute;
  top: 10px;
  left: 5%;
  background-color: transparent;
  border: none;
}
</style>