echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)

更新時間：2023年08月07日 15:17:50 作者：美酒沒故事°

最近在學習echarts,今天就來介紹一下echarts實現(xiàn)中國地圖下鉆進入下一級,具有一定的參考價值,感興趣的可以了解一下

echarts是一個基于JavaScript的可視化開源組件庫。通過使用echarts,用戶可以方便地將數(shù)據(jù)制圖展示，本文就來介紹一下echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)，具體如下：

獲取geo數(shù)據(jù)：

可以使用node爬蟲獲取數(shù)據(jù)

最好多爬幾遍，因為有時候會獲取錯誤

echarts實現(xiàn) html

  <div ref="echarts-dom" class="echarts-content"></div>

js:

export default {
  data() {
    return {
      mapChart: null,
      addressCode: []
    };
  },
  mouted(){
    this.mapChart = echarts.init(this.$refs["echarts-dom"]);
    this.getData();
  },
  methods: {
    getData("100000") {
	  fetch(`${process.env.VUE_APP_ORIGIN}/geoData/$[code].json`)
	     .then((res) => {
	       return res.json();
	     }).then((res) => {
	       this.addressCode = res.features;
	       echarts.registerMap("echartsMap", res);
	       this.setEchartsOptions();
	     })
	     .finally((err) => {
	       this.mapLoading = false;
	     });
	  },
	 // echarts配置
     setEchartsOptions() {
       this.mapChart.off("click"); //圖表渲染前銷毀點擊事件
       this.mapChart.setOption({
          series: [
            {
              type: "map",
              mapType: "echartsMap",
              roam: true,
              scaleLimit: {
                min: 1.1,
                max: 5.2,
              },
              data: this.addressCode,
              // 地圖模塊樣式
              itemStyle: {
                // 默認模塊樣式
                normal: {
                  borderWidth: 1.3,
                  borderColor: "#00ffff",
                  areaColor: "#09295b",
                },
                // 鼠標經(jīng)過模塊樣式
                emphasis: {
                  show: true,
                  borderWidth: 3,
                  areaColor: "#0d559d",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
              },
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
          ],
        },true);
      this.addEchartsEventListener();
    },
    // 監(jiān)聽echarts事件
    addEchartsEventListener() {
      const that = this;
      // 點擊時間
      this.mapChart.on("click", function (params) {
        console.log(params.data);
        that.getData(params.data.codeNumber);
      });
      // 移動 | 縮放
      this.mapChart.on("georoam", (params) => {
        that.$emit("swicthPanle", false);
      });
    },
  }
}

到此這篇關于echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)的文章就介紹到這了,更多相關echarts 地圖下鉆內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: