Echarts地图配置

最新推荐文章于 2024-09-17 07:23:55 发布

爬墙少年_OC

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量3.7k

点赞数 3

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_43795006/article/details/108670728

版权

本文介绍了如何配置Echarts地图，包括获取区域数据、注册地图、设置geoselectchanged事件、处理数据变化、请求地图轮廓JSON数据及使用axios请求本地文件。重点强调了配置顺序和事件监听的注意事项。

摘要由CSDN通过智能技术生成

最终效果：

组件代码

<template>
  <div class="container">
    <div id="map"></div>
    <button :data-code="geoName" @click="changeMap">{
   {
   geoName}}</button>
  </div>
</template>

<script>
import axios from 'axios';
import {
    CODE_NAME, GEO_NAME } from "@/const/data";
export default {
   
  data() {
   
    return {
   
      geoName: "无",
      districtCode: {
   },
      geoCode: "330000",
      geoData:"",
    };
  },
  created() {
   
    Object.entries(CODE_NAME).forEach((item) => {
   
      let [code, name] = item;
      this.districtCode[name] = code;
    });
  },
  mounted() {
   
    this.geoName = GEO_NAME[this.geoCode];
    this