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

按照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
      }
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值