Vue 中使用echarts 绘制地图

本文主要是介绍Vue 中使用echarts 绘制地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图形如下

在这里插入图片描述

第一步，下载echarts

npm install echarts --save-dev

第二步，创建echarts.js文件，按需导入echarts

//echarts.js
import echarts from 'echarts/lib/echarts';
//引入地图
import 'echarts/lib/chart/map';
//引入柱状图
import 'echarts/lib/chart/bar';
//引入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/scatter';
//引入折线图
import 'echarts/lib/chart/line';//引入插件
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/geo'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/title'//导出echarts
export default echarts

第三步，下载所需区域地图的json数据

网站为http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4.
进入网站找到需要的省市，点击左下角的geojson下载到本地
在这里插入图片描述
通过第四步import方式引入数据即可使用。

第四步，建立地图组件

<template><div class="echarts"><div :style="{height:'400px',width:'100%'}" ref="myEchart"></div></div>
</template>
<script>import echarts from "../plugins/echarts";import JSON from "../assets/hz.json"; // 引入杭州市地图数据(引入方式重点，本人用其他方式报错)export default {name: "echarts",data() {return {mapOption:{//标题内容title: {text: "杭州市各区案件分布图 ",},//鼠标移入时显示的内容tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},//左下角显示内容高低visualMap: {min: 100,max: 5000,text: ["高", "低"],realtime: false,calculable: true,inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{type: "map",//图标类型mapType: "杭州市", // 自定义扩展图表类型name: "杭州市各区案件完成数量对比",label: {show: true,},//用于修改正常显示地图颜色边框等内容normal: {borderWidth: 1,borderColor: "#e1e1e1",color: "#90c31d",opacity : 0.8},//用于修改鼠标移入时地图颜色边框等内容emphasis: {areaColor:"#749f83",//修改移入时地图颜色},data: [{ name: "西湖区", value: 2057.34 },{ name: "余杭区", value: 1577.48 },{ name: "临安区", value: 386.1 },{ name: "淳安区", value: 692.6 },{ name: "建德市", value: 445.49 },{ name: "桐庐县", value: 489.64 },{ name: "富阳区", value: 376.78 },{ name: "萧山区", value: 451.97 },{ name: "拱墅区", value: 520.26 },{ name: "下城区", value: 210.9 },{ name: "江干区", value: 418.26 },{ name: "滨江区", value: 581.84 },{ name: "上城区", value: 418.01 },],},],}};},mounted() {this.drawMap();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {drawMap() {//折线图let leftchart1 = echarts.init(document.getElementById("leftchart1"));leftchart1.setOption(this.leftchart1);let leftchart2 = echarts.init(document.getElementById("leftchart1"));leftchart2.setOption(this.leftchart2);//地图var myChart = echarts.init(document.getElementById("centerMap"));echarts.registerMap("杭州市", JSON, {}); //这个是关键，之前拿到的青州各街道数据let option = {title: {text: "杭州市案件分布图 ",},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},visualMap: {min: 100,max: 5000,text: ["高", "低"],realtime: false,calculable: true,inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "杭州市各区案件完成数量对比",type: "map",mapType: "杭州市", // 自定义扩展图表类型label: {show: true,},data: [{ name: "西湖区", value: 2057.34 },{ name: "余杭区", value: 1577.48 },{ name: "临安区", value: 386.1 },{ name: "淳安区", value: 692.6 },{ name: "建德市", value: 445.49 },{ name: "桐庐县", value: 489.64 },{ name: "富阳区", value: 376.78 },{ name: "萧山区", value: 451.97 },{ name: "拱墅区", value: 520.26 },{ name: "下城区", value: 210.9 },{ name: "江干区", value: 418.26 },{ name: "滨江区", value: 581.84 },{ name: "上城区", value: 418.01 },],}myChart.setOption(this.mapOption);}}
</script>