v-chart中使用map地图出现警告 不显示地图 修改使用本地json文件

v-chart中使用map时, 将教程中的代码直接拿过来, 默认是显示不出来的, 浏览器打开控制台发现有一个警告如下

这种情况是什么XMLHttpRequest是一个异步请求, 但是这里在使用同步的方式发送请求,导致出现的这个警告

我们刷新浏览器可以发现浏览器在获取map这个插件时, 发送了一个json串的请求

这里使用的是中国地图, 所以查询的json数据中有国内各省/直辖市的数据信息
后来查找资料, 有一个博友的情况是map使用情景是本地内网, 无法发送请求进行获取json, 然后他的解决方案是使用echart的自带json数据

<template>
  <div>
    <span>当前选中了: {{ cityName || '-' }}</span>
    <ve-map :data="chartData" :settings="chartSettings" :events="chartEvents"></ve-map>
  </div>
</template>
<script>
// 注意这里在引入echarts中的json文件
import china from "echarts/map/json/china.json";
export default {
  data() {
    this.chartSettings = {
      // 这里在配置引用的文件
      mapOrigin: china,
      position: "china",
      selectedMode: "single",
    };
    this.chartEvents = {
      click: v => {
        this.cityName = v.name;
      }
    };
    return {
      cityName: "",
      chartData: {
        columns: ["位置", "GDP"],
        rows: [
          { 位置: "吉林", GDP: 123 },
          { 位置: "北京", GDP: 1223 },
          { 位置: "上海", GDP: 2123 },
          { 位置: "浙江", GDP: 4123 }
        ]
      }
    };
  }
};
</script>

这里在script中的第一行引入了一个json文件, 这个文件可以在项目中找到, 具体位置如下

node_modules/echarts/map/json/china.json

这里有中国地图, 世界地图还有国内各省市地图, 具体根据自己需求去引入

这时就可以看到地图已经完全显示出来了,但是…不太对啊 !!!

这地图怎么这么长??? 小朋友? 你是否有很多的问号???

我们来看一下控制台的样式, 是什么限制了他的格式?

上面两幅图中, 我们改变了控制台在右侧的宽度, 那么浏览器中地图的宽度也在响应式的改变, 但是他的高度一致不变, 始终保持在400px, 这就找到原因了, 那么接下来就要开始飙车了, 都是考试重点, 要画圈的

中国东西南北的最远端的经纬度都是多少?

这里我们看到南边极点地图中显示到了海南的三亚地区, 所以再查一下三亚的纬度

我们粗略计算为北纬18°

南北跨度53-18=35°
东西跨度135-73=62°
经计算宽度应设置为62÷35x400 = 708.57
粗略设置为700px吧

设置一下父类的div宽度

.divclass {
  width: 700px;
  margin: 0px auto;
}

好像还是哪里不对啊???

地图上下没有紧邻父类框, 而左右却紧紧的挨着边框, 那么这个问题就需要修改了, 我们先设置一下地图的左右边距, 设置一下margin-left和margin-right

<div class="divclass">
    <span>当前选中了: {{ cityName || '-' }}</span>
    <ve-map
      style="margin-left:50px;margin-right:50px;"
      :data="chartData"
      :settings="chartSettings"
      :events="chartEvents"
    ></ve-map>
  </div>
</template>

这样左右边距都多出来50px, 那么意味着可以替换为将父级div的宽度减去100px,

效果是这样的, 那么就可以记住了, 中国地图基本使用6:4的比例就可以了, 具体自己可以微调, 例如使用5.5:4也可以, 我们看看效果

好像也一般, 5:4呢???

感觉自己试探的样子, 像极了悟空!

最后说一下, gif在线生成图片工具网址:http://gif.55.la/