Echart系列 | 绘制世界地图含中国各个省份(地图篇)(一)

步骤一

先绘制一张世界地图,这一步为基础工程,代码+效果图附下:

world.json 链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:oe9w 

<template>
  <div class="content">
    <!-- 设置容器ID,宽度1920PX,高度1080PX -->    
    <div id="myEchart" style="width:1920px; height:1080px;"></div>
  </div>
</template>

<script>
import $ from "jquery";/* 引入JQUERY,此处不赘述,用于调用$.get函数。 */
var echarts = require("echarts");/* 引入echarts模块,此处不赘述 */

export default {
  data() {
    return {
      myChart: undefined,/* 定义变量 */
    };
  },
  mounted() {
    $.get('../static/world.json', function (geoJson) {/* 请求世界地图的本地json数据 */
      this.myChart = echarts.init(document.getElementById('myEchart'));/* 初始画布 */
      echarts.registerMap('world', geoJson);/* 注册world地图 */
      this.myChart.setOption({/* 设置myChart配置项 */
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            type: 'map',
            mapType: 'world', // 自定义扩展图表类型
            itemStyle: {
              normal: { label: { show: true } }, // 普通状态下,显示标签
              emphasis: { label: { show: true } } // 高亮状态下,显示标签(默认)
            },
            roam: true, // 放大缩小、平移
          }
        ]
      })
    })
  },
};
</script>

步骤二

网络上搜到一份中国省份的json文件,https://zcreturn0.github.io/echarts-map/json/china.js,提取里面的内容拷贝到世界地图json文件中。注意的点有:将省份当做国家处理,观察两份JSON结构的格式。

看一下效果:为了方便看结构,这里将普通状态下的标签先注释了,为了大家不被密密麻麻的文字看到眼花

步骤三

最后微调下,将世界json中的China部分删除即可(因为各省份已经拼成一个中国了,可以把China部分删除,如果你不想删除,也是可以。)

经过上述操作后,完整的地图JSON出来了:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:oe9w 

免费分享大家 [44.38652343750002,10.430224609374989],[44.94296875,10.43671875],[45.81669921875002,10.835888671874997],[46.565039062500006,10.745996093749994],[47.40498046875001,11.174023437499997],[48.01923828125001,11.139355468749997],[48.57255859375002,11.320507812499997],[48.938574218750006,11.258447265624994],[50.11005859375001,11.529296875],[50.79228515625002,11.983691406249989],[51.2548828125,11.830712890624994],[51.08427734375002,11.335644531249997],[51.140625,10.656884765624994],[51.031835937500006,10.444775390624997],[51.19296875,10.554638671874997],[51.390234375,10.422607421875],[50.93007812500002,10.33554687499999],[50.825,9.428173828124997],[50.10283203125002,8.199804687499991],[49.85205078125,7.962548828124994],[49.234960937500006,6.77734375],[49.04931640625,6.173632812499989],[47.97529296875001,4.497021484374997],[46.87880859375002,3.28564453125],[46.05117187500002,2.475146484374989],[44.92021484375002,1.81015625],[43.71757812500002,0.857861328124997],[41.97988281250002,-0.973046875],[41.53271484375,-1.6953125],[41.521875,-1.572265625],[41.42695312500001,-1.449511718750003],[41.24980468750002,-1.220507812500003],[40.97871093750001,-0.870312500000011],[40.964453125,2.814648437499997],[41.341796875,3.20166015625],[41.61347656250001,3.590478515624994],[41.88398437500001,3.977734375],[41.91533203125002,4.031298828124989],[42.02412109375001,4.137939453125],[42.85664062500001,4.32421875],[43.12568359375001,4.644482421874997],[43.58349609375,4.85498046875],[43.988867187500006,4.950537109374991],[44.940527343750006,4.912011718749994],[47.97822265625001,7.9970703125]]]},"properties":{"name":"索马里","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[9.579979133936737,47.05856388629306],[9.409458596647225,47.02019676540292],[9.46249431093294,47.09010747968864],[9.46249431093294,47.19858962254578],[9.527658197470123,47.27026989773668],[9.579979133936737,47.05856388629306]]]},"properties":{"name":"列支敦斯登","childNum":1}},{"geometry":{"type":"Polygon","coordinates"
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页