图形如下
第一步，下载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>