这⾥地图数据只做了杭州市的下钻到区的，数据可⾃⾏下载 Echarts要下载5.0以下的版本，
⽬前echarts中地图数据已经⽼旧没有及时更新，这个我只做了浙江省境内的数据更新。
public下的map⽂件存放着地图数据
<template>
<div>
<div>
<el-button size="mini" type="primary" @click="backMap()" class="btn">返回概览</el-button>
<div id="mapcontainer"></div>
<script>
let echarts = require("echarts/lib/echarts");
import $ from "jquery";
require("echarts/lib/chart/map");
require("echarts/map/js/china");
export default {
name: "mapChart",
data() {
return {};
},
mounted() {
// 初始化加载
this.mapChart();
},
methods: {
// 返回全国视图
backMap() {
this.$hods.mapChart();
},
// 配置渲染map
mapChart() {
let myChart = echarts.ElementById("mapcontainer")); let dataList = [{
name: "南海诸岛",
value: 0
},
{
name: "北京",
value: 5
},
{
name: "天津",
value: 7
},
{
name: "上海",
value: 4
}
];
window.addEventListener("resize", () => {
});
// $.getJSON(`/map/province/330000.json`, data => {
// this.$isterMap('浙江', data);
// initEcharts('浙江');
// })
initEcharts('china')
function initEcharts(map) {
let option = {
geo: {
map: map,
roam: false,
scaleLimit: {
min: 1.2,
//图形上的⽂本标签，可⽤于说明图形的⼀些数据信息 label: {
normal: {
show: true,
fontSize: "10",
color: "rgb(61,161,173)",
}
},
//地图区域的多边形图形样式，有 normal 和 emphasis 两个状态
itemStyle: {
//normal 是图形在默认状态下的样式；
normal: {
areaColor: 'rgba(23,28,51,1)',
borderColor: 'rgba(46,133,243,1)',
borderWidth: 1.3,
shadowBlur: 15,
// shadowColor: 'rgb(58,115,192)',
shadowOffsetX: 7,
shadowOffsetY: 6,
},
//emphasis 是图形在⾼亮状态下的样式，⽐如在⿏标悬浮或者图例联动⾼亮时。
emphasis: {
areaColor: 'rgba(46,133,243,0.5)',
borderWidth: 1.6,
shadowBlur: 25,
}
}
},
series: [{
name: "信息量",
type: "map",
//这⾥是'china'，及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai' mapType: map,
geoIndex: 0,
data: dataList
}]
};
myChart.setOption(option);
}
//定义全国省份的数组
var provinces = {
// 23个省
台湾: "taiwan",
河北: "hebei",
⼭西: "shanxi",
辽宁: "liaoning",
吉林: "jilin",
⿊龙江: "heilongjiang",
江苏: "jiangsu",
浙江: "330000",
安徽: "anhui",
福建: "fujian",
江西: "jiangxi",
⼭东: "shandong",
河南: "henan",
湖北: "hubei",
湖南: "hunan",
⼴东: "guangdong",
海南: "hainan",
四川: "sichuan",
⽢肃: "gansu",
青海: "qinghai",
// 5个⾃治区
新疆: "xinjiang",
⼴西: "guangxi",
内蒙古: "neimenggu",
宁夏: "ningxia",
西藏: "xizang",
// 4个直辖市
北京: "beijing",
天津: "tianjin",
上海: "shanghai",
重庆: "chongqing",
// 2个特别⾏政区
⾹港: "xianggang",
澳门: "aomen",
};
// 市
var cityMap = {
北京市: "110100",
天津市: "120100",
上海市: "310100",
重庆市: "500100",
崇明县: "310200",
湖北省直辖县市: "429000",
铜仁市: "522200",
毕节市: "522400",
⽯家庄市: "130100",
唐⼭市: "130200",
秦皇岛市: "130300",
邯郸市: "130400",
邢台市: "130500",
保定市: "130600",
张家⼝市: "130700",
承德市: "130800",
沧州市: "130900",
廊坊市: "131000",
衡⽔市: "131100",
太原市: "140100",
⼤同市: "140200",
阳泉市: "140300",
长治市: "140400",
晋城市: "140500",
朔州市: "140600",
晋中市: "140700",
运城市: "140800",
忻州市: "140900",
临汾市: "141000",
吕梁市: "141100",
呼和浩特市: "150100",
包头市: "150200",
乌海市: "150300",
⾚峰市: "150400",
通辽市: "150500",
鄂尔多斯市: "150600",
呼伦贝尔市: "150700",
巴彦淖尔市: "150800",
乌兰察布市: "150900",
兴安盟: "152200",
锡林郭勒盟: "152500",
阿拉善盟: "152900",
抚顺市: "210400",
本溪市: "210500",
丹东市: "210600",
锦州市: "210700",
营⼝市: "210800",
⾩新市: "210900",
辽阳市: "211000",
盘锦市: "211100",
铁岭市: "211200",
朝阳市: "211300",
葫芦岛市: "211400",
长春市: "220100",
吉林市: "220200",
四平市: "220300",
辽源市: "220400",
通化市: "220500",
⽩⼭市: "220600",
松原市: "220700",
⽩城市: "220800",
延边朝鲜族⾃治州: "222400"，哈尔滨市: "230100",
齐齐哈尔市: "230200",
鸡西市: "230300",
鹤岗市: "230400",
双鸭⼭市: "230500",
⼤庆市: "230600",
伊春市: "230700",
佳⽊斯市: "230800",
七台河市: "230900",
牡丹江市: "231000",
⿊河市: "231100",
绥化市: "231200",
⼤兴安岭地区: "232700",
南京市: "320100",
⽆锡市: "320200",
徐州市: "320300",
常州市: "320400",
苏州市: "320500",
南通市: "320600",
连云港市: "320700",
淮安市: "320800",
盐城市: "320900",
扬州市: "321000",
镇江市: "321100",
泰州市: "321200",
宿迁市: "321300",
杭州市: "330100",
宁波市: "330200",
温州市: "330300",
嘉兴市: "330400",
湖州市: "330500",
绍兴市: "330600",
⾦华市: "330700",
衢州市: "330800",
⾈⼭市: "330900",
台州市: "331000",
丽⽔市: "331100",
合肥市: "340100",
芜湖市: "340200",
蚌埠市: "340300",
淮南市: "340400",
马鞍⼭市: "340500",
