在Vue中使用echarts地图(中国)

最新推荐文章于 2025-07-10 12:48:26 发布

veraLX

最新推荐文章于 2025-07-10 12:48:26 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_35411675/article/details/88123935

按照echarts的示例，复制option但是无法出现地图，觉得应该是少了什么文件，就随手百度了一下，看到比较多的方法就是引用如下两个文件再引用全局变量balabala：

<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>

<script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>

用这种方式实现了一遍并不适合我，前提是我npm安装了echarts，不需要这种导入的方式，解决方法如下：

1.引入地图文件：

import echarts from 'echarts'
import 'echarts/map/js/china'

2.按照使用普通表格的方式使用地图

//html
<div ref="MapMountNode" class="charts chart-bar map-mount-node"></div>

//js
methods: {
    resize () {
      this.MapMountNode.resize()
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 数据纯属虚构
      var data = [{
        name: '北京',
        value: 5.3
      },
      {
        name: '天津',
        value: 3.8
      },
      {
        name: '上海',
        value: 4.6
      },
      {
        name: '重庆',
        value: 3.6
      },
      {
        name: '河北',
        value: 3.4
      },
      {
        name: '河南',
        value: 3.2
      },
      {
        name: '云南',
        value: 1.6
      },
      {
        name: '辽宁',
        value: 4.3
      },
      {
        name: '黑龙江',
        value: 4.1