vue使用Echarts绘制地图

 

大致实现就是这个效果，鼠标滑过的时候会显示该区域的一个信息，加上自定义的显示图标

有需要希望可以帮到各位

目录

一、在vue中引入Echarts 

二、下载并引入china.json文件

三、准备html容器、css中给图表需要的宽高

四、完整代码

---

一、在vue中引入Echarts 

这个可以看Echarts官方文档，按照步骤一步一步来就可以了

Echarts文档地址https://echarts.apache.org/handbook/zh/basics/import/

//1.安装Echarts
npm install echarts --save

//2.局部引入
import * as echarts from 'echarts';


//3. 基于准备好的dom，初始化echarts实例，此处我们也可以通过ref来获取dom
//通常我们封装一个函数来获取dom和绘制Echarts然后在mounted这个钩子里去调用

var myChart = echarts.init(document.getElementById('main'));

//4. 绘制图表 
myChart.setOption({

});

二、下载并引入china.json文件

因为我们绘制的是中国地图，所以需要到china.json的数据,我们在组件中引入并使用

有需要的可以上我的资源去免费下载，

注意修改成自己的路径，此处echarts和china.json必须全部正确引入

import geoJson from '@/utils/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)

三、准备html容器、css中给图表需要的宽高

这里用到了elementui的布局，需要的自行引入

这部分大家就按照自己需要的宽高去设定就可以了

.managingPatientSize {
  width: 100%;
  height: 100%;
  // background-color: #111b41;
  color: #fff;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      position: relative;
      #china-map {
        height: 100%;
      }
    }
  }
}

四、完整代码

这里代码直接cv放在组件里引入就可以看到效果，数据都是死的，根据实际需要去改动就可以了

代码是什么意思看注释去修改。

这里我使用自定义png图片去绘制散点，就不能修改涟漪特效的颜色了，有会的兄弟可以评论交流一下