使用echarts在vue项目中基本实现可视化地图的方法

首先是效果图

基本实现步骤是： 1. 先用指令下载echarts 这个不用说了，跟在项目中导入ui组件一样

2.将echarts全局挂载或者需要的组件引入

// 局部引入echarts

import * as echarts from 'echarts'

3.下载你需要的区域的地图json 在这个网站点击你需要的区域然后下载，放在文件中 //https://datav.aliyun.com/portal/school/atlas/area_selector

4.将地图数据引入组件

// 引入下载的地图json数据

import { mapData } from '../../assets/mapData'

5.然后就是正常的echarts操作，将数据传入到option中

先注册地图

// 注册当前使用的地图名

    echarts.registerMap('chinaMap', mapData)

大致的一个代码

<template>
  <!-- 视图显示的盒子 -->
  <div id="myecharts" ref="demo" />
</template>
<script>
// 局部引入echarts
import * as echarts from 'echarts'
// 引入下载的地图json数据
import { mapData } from '../../assets/mapData'
export default {
  data() {
    return {}
  },
  mounted() {
    const myChart = echarts.init(this.$refs.demo)
    // 注册当前使用的地图名
    echarts.registerMap('chinaMap', mapData)
    const option = {
      geo: {
        // 地理坐标组件
        type: 'map',
        map: 'chinaMap',
        // 地名显示
        label: {
          show: true
        },
        zoom: 1.2
      }

    }
    myChart.setOption(option)
  }
}
</script>
<style scoped>
#myecharts{
  width: 600px;
  height: 600px;
  border: 2px solid red;
  margin: auto;
}
</style>

这样你就可以得到一个上面的地图了