快捷導(dǎo)航

echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí)(地圖鉆取)

更新時(shí)間：2023年08月07日 15:17:50 作者：美酒沒(méi)故事°

最近在學(xué)習(xí)echarts,今天就來(lái)介紹一下echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí),具有一定的參考價(jià)值,感興趣的可以了解一下

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

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

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

最好多爬幾遍，因?yàn)橛袝r(shí)候會(huì)獲取錯(cuò)誤

echarts實(shí)現(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"); //圖表渲染前銷毀點(diǎn)擊事件
       this.mapChart.setOption({
          series: [
            {
              type: "map",
              mapType: "echartsMap",
              roam: true,
              scaleLimit: {
                min: 1.1,
                max: 5.2,
              },
              data: this.addressCode,
              // 地圖模塊樣式
              itemStyle: {
                // 默認(rèn)模塊樣式
                normal: {
                  borderWidth: 1.3,
                  borderColor: "#00ffff",
                  areaColor: "#09295b",
                },
                // 鼠標(biāo)經(jīng)過(guò)模塊樣式
                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;
      // 點(diǎn)擊時(shí)間
      this.mapChart.on("click", function (params) {
        console.log(params.data);
        that.getData(params.data.codeNumber);
      });
      // 移動(dòng) | 縮放
      this.mapChart.on("georoam", (params) => {
        that.$emit("swicthPanle", false);
      });
    },
  }
}

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

您可能感興趣的文章: