图形如下
第一步，下载echarts
npm install echarts --save-dev
第二步，创建echarts.js文件，按需导入echarts
//echarts.jsimport 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'//导出echartsexport default echarts
第三步，下载所需区域地图的json数据
网站为/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>
