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

最新推荐文章于 2024-12-07 22:07:52 发布

前端杂记

最新推荐文章于 2024-12-07 22:07:52 发布

阅读量9.6k

点赞数 2

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/weixin_37930716/article/details/95046895

版权

步骤一

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

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地图 */