echarts_Map | 不是第一

vue 地图下钻

<template>
  <div id="app">
    <div class="header" id="header"></div>
  </div>
</template>

<script>
import echarts from "echarts"; //先引入echarts
import axios from "axios";

export default {
  name: "App",
  methods: {
    async initChart() {
      let chart = echarts.init(document.getElementById("header"));
      let { data } = await this.getAllJson();
      let chinaGeoJson = await this.getGeoJson("100000_full.json");
      this.initEcharts(chinaGeoJson.data, "全国", chart, data);
    },
    initEcharts(geoJson, name, chart, alladcode) {
      //echarts绘图

      echarts.registerMap(name, geoJson);
      let option = {
        title: {
          text: name,
          left: "center",
        },
        series: [
          {
            type: "map",
            map: name,
            itemStyle: {
              areaColor: "#1890ff",
            },
          },
        ],
      };
      chart.setOption(option);
      // 解绑click事件
      chart.off("click");
      //给地图添加监听事件
      chart.on("click", (params) => {
        let clickRegionCode = alladcode.filter(
          (areaJson) => areaJson.name === params.name
        )[0].adcode;

        console.log(params, "params", clickRegionCode);
        // 根据code 查询地图数据 并渲染
        this.getGeoJsona(110100)
          .then((regionGeoJson) =>
            this.initEcharts(regionGeoJson.data, params.name, chart, alladcode)
          )
          .catch((err) => {
            console.log(err);
            this.getGeoJson().then((chinaGeoJson) =>
              this.initEcharts(chinaGeoJson.data, "全国", chart, alladcode)
            );
          });
      });
    },
    initmap() {
      this.initChart();

      //获取地图json数据
    },
    async getGeoJson() {
      // let publicUrl = "https://geo.datav.aliyun.com/areas_v2/bound/";
      return await axios.get(`/map/${100000}_full.json`);
    },
    async getGeoJsona(code) {
      // let publicUrl = "https://geo.datav.aliyun.com/areas_v2/bound/";
      return await axios.get(`/map/city/${code}.json`);
    },
    async getAllJson() {
      return await axios.get(`/map/all.json`);
    },
    // 配置渲染map
  },
  async mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.header {
  height: 500px;
  width: 500px;
  background-color: #f2f2f2;
}
</style>

html实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图下钻</title>
    <style>
        #main {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    <script>
        let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/';

        async function initChart() {
            let chart = echarts.init(document.getElementById('main'));
            let alladcode = await getGeoJson('all.json')
            let chinaGeoJson = await getGeoJson('100000_full.json')
            initEcharts(chinaGeoJson, '全国', chart, alladcode)
        }
        initChart();

        //echarts绘图
        function initEcharts(geoJson, name, chart, alladcode) {
            echarts.registerMap(name, geoJson);
            let option = {
                title: {
                    text: name,
                    left: 'center'
                },
                series: [{
                    type: 'map',
                    map: name,
                    itemStyle: {
                        areaColor: '#1890ff'
                    }
                }]
            }
            chart.setOption(option)
            // 解绑click事件
            chart.off("click");
            //给地图添加监听事件
            chart.on('click', params => {
                let clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode;
                getGeoJson(clickRegionCode + '_full.json').then(regionGeoJson => initEcharts(regionGeoJson, params.name, chart, alladcode))
                    .catch(err => {
                        getGeoJson('100000_full.json').then(
                            chinaGeoJson=>initEcharts(chinaGeoJson, '全国', chart, alladcode)   
                        )
                              
                    })
            })
        }
        //获取地图json数据
        async function getGeoJson(jsonName) {
            return await $.get(publicUrl + jsonName)
        }
    </script>
</body>

</html>

# vue 地图下钻

# html实现

vue 地图下钻

html实现