实现工具：echarts插件、地图json文件。
江西省市区的离线json文件，已上传到github：https://github.com/Gx2019/map
vue
直接贴代码：
<template>
<div class="NotiBox">
<div class="leftbox">
<!-- <a-button type="primary" style="padding:0 20px;margin:0 0 10px 0px;" @click="province">全省</a-button> -->
<div id="mapBox" ref="myEchartsBox"></div>
</div>
<div class="right">
</div>
</div>
</template>
<script>
var echarts = require(\'echarts\')
export default {
name: \'jxsEchart\',
components: {},
data() {
return {
citys: \'江西省\'
}
},
created() {},
mounted() {
this.getMap()
},
methods: {
displayRender({labels}) {
return labels[labels.length - 1];
},
onChange(value) {
console.log(value.toString())
},
getMap() {
let _that = this
var myEchartsBox = _that.$refs.myEchartsBox
var jxs = require(\'@/assets/jxs.json\')
var ganzhou = require(\'@/assets/ganzhou.json\')
var yichun = require(\'@/assets/yichun.json\')
var xinyu = require(\'@/assets/xinyu.json\')
var shangrao = require(\'@/assets/shangrao.json\')
var pingxiang = require(\'@/assets/pingxiang.json\')
var nanchang = require(\'@/assets/nanchang.json\')
var jiujiang = require(\'@/assets/jiujiang.json\')
var jingdezhen = require(\'@/assets/jingdezhen.json\')
var jian = require(\'@/assets/jian.json\')
var fuzhou = require(\'@/assets/fuzhou.json\')
var yingtan = require(\'@/assets/yingtan.json\')
echarts.extendsMap = function(id, opt) {
var chart = echarts.init(myEchartsBox)
var curGeoJson = {}
var cityMap = {
南昌市: nanchang,
景德镇市: jingdezhen,
萍乡市: pingxiang,
九江市: jiujiang,
新余市: xinyu,
鹰潭市: yingtan,
赣州市: ganzhou,
吉安市: jian,
宜春市: yichun,
抚州市: fuzhou,
上饶市: shangrao
}
var geoCoordMap = {
南昌: [115.89, 28.48],
景德镇: [117.28, 29.09],
萍乡: [113.93, 27.41],
九江: [115.97, 29.51],
新余: [114.81, 27.72],
鹰潭: [117.12, 28.1],
赣州: [115.04, 25.67],
吉安: [115.05, 26.88],
宜春: [114.41, 28.03],
抚州: [116.45, 27.79],
上饶: [117.92, 28.22]
}
var levelColorMap = {
\'1\': \'rgba(241, 109, 115, .8)\',
\'2\': \'rgba(255, 235, 59, .7)\',
\'3\': \'#1BAF\'
}
var defaultOpt = {
mapName: \'china\', // 地图展示
goDown: false, // 是否下钻
bgColor: \'#1BAFAC\', // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function(name, option, instance) {}
}
if (opt) opt = this.util.extend(defaultOpt, opt)
// 层级索引
var name = [opt.mapName]
var idx = 0
var pos = {
leftPlus: 50,
leftCur: 128,
left: 107,
top: 10 //索引的位置
}
var line = [
[0, 0],
[8, 11],
[0, 22]
]
// style
var style = {
font: \'18px "Microsoft YaHei", sans-serif\',
textColor: \'#eee\',
lineColor: \'rgba(147, 235, 248, .8)\'
}
var handleEvents = {
/**
* i 实例对象
* o option
* n 地图名
**/
resetOption: function(i, o, n) {
var breadcrumb = this.createBreadcrumb(n)
var j = name.indexOf(n)
var l = o.graphic.length
if (j < 0) {
o.graphic.push(breadcrumb)
o.graphic[0].children[0].shape.x2 = 145
o.graphic[0].children[1].shape.x2 = 145
if (o.graphic.length > 2) {
for (var x = 0; x < opt.data.length; x++) {
if (n === opt.data[x].name + \'市\') {
o.series[0].data = handleEvents.initSeriesData([opt.data[x]])
break
} else o.series[0].data = []
}
}
name.push(n)
idx++
} else {
o.graphic.splice(j + 2, l)
if (o.graphic.length <= 2) {
o.graphic[0].children[0].shape.x2 = 60
o.graphic[0].children[1].shape.x2 = 60
o.series[0].data = handleEvents.initSeriesData(opt.data)
}
name.splice(j + 1, l)
idx = j
pos.leftCur -= pos.leftPlus * (l - j - 1)
}
o.geo.map = n
o.geo.zoom = 0.4
i.clear()
i.setOption(o)
this.zoomAnimation()
opt.callback(n, o, i)
},
/**
* name 地图名
**/
createBreadcrumb: function(name) {
var cityToPinyin = {
南昌市: \'nanchang\',
景德镇市: \'jingdezhen\',
萍乡市: \'pingxiang\',
九江市: \'jiujiang\',
新余市: \'xinyu\',
鹰潭市: \'yingtan\',
赣州市: \'ganzhou\',
吉安市: \'jian\',
宜春市: \'yichun\',
抚州市: \'fuzhou\',
上饶市: \'shangrao\'
}
var breadcrumb = {
type: \'group\',
id: name,
left: pos.leftCur + pos.leftPlus,
top: pos.top + 3,
children: [
{
type: \'polyline\',
left: -90,
top: -5,
shape: {
points: line
},
style: {
stroke: \'#fff\',
key: name
// lineWidth: 2,
},
onclick: function() {
var name = this.style.key
handleEvents.resetOption(chart, option, name)
}
},
{
type: \'text\',
left: -68,
top: \'middle\',
style: {
text: name,
textAlign: \'center\',
fill: style.textColor,
font: style.font
},
onclick: function() {
var name = this.style.text
handleEvents.resetOption(chart, option, name)
}
},
{
type: \'text\',
left: -68,
top: 10,
style: {
name: name,
text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : \'\',
textAlign: \'center\',
fill: style.textColor,
font: \'12px "Microsoft YaHei", sans-serif\'
},
onclick: function() {
// console.log(this.style);
var name = this.style.name
handleEvents.resetOption(chart, option, name)
}
}
]
}
pos.leftCur += pos.leftPlus
return breadcrumb
},
// 设置effectscatter
initSeriesData: function(data) {
var temp = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value, data[i].level)
})
}
}
return temp
},
zoomAnimation: function() {
var count = null
var zoom = function(per) {
if (!count) count = per
count = count + per
// console.log(per,count);
chart.setOption({
geo: {
zoom: count
}
})
if (count < 1)
window.requestAnimationFrame(function() {
zoom(0.2)
})
}
window.requestAnimationFrame(function() {
zoom(0.2)
})
}
}
var option = {
backgroundColor: opt.bgColor,
graphic: [
{
type: \'group\',
left: pos.left,
top: pos.top - 4,
children: [
{
type: \'line\',
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor
}
},
{
type: \'line\',
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: style.lineColor
}
}
]
},
{
id: name[idx],
type: \'group\',
left: pos.left + 2,
top: pos.top,
children: [
{
type: \'polyline\',
left: 90,
top: -12,
shape: {
points: line
},
style: {
stroke: \'transparent\',
key: name[0]
},
onclick: function() {
var name = this.style.key
handleEvents.resetOption(chart, option, name)
}
},
{
type: \'text\',
left: 0,
top: \'middle\',
style: {
text: name[0] === \'江西\' ? \'江西省\' : name[0],
textAlign: \'center\',
fill: style.textColor,
font: style.font
},
onclick: function() {
handleEvents.resetOption(chart, option, \'江西\')
}
},
{
type: \'text\',
left: 0,
top: 10,
style: {
text: \'JIANGXI\',
textAlign: \'center\',
fill: style.textColor,
font: \'12px "STKaiti", sans-serif\'
},
onclick: function() {
handleEvents.resetOption(chart, option, \'江西\')
}
}
]
}
],
geo: {
map: opt.mapName,
// roam: true,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: \'#fff\'
}
},
emphasis: {
textStyle: {
color: \'#fff\'
}
}
},
itemStyle: {
normal: {
borderColor: \'rgba(147, 235, 248, 1)\',
borderWidth: 1,
areaColor: {
type: \'radial\',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: \'rgba(147, 235, 248, 0)\' // 0% 处的颜色
},
{
offset: 1,
color: \'rgba(147, 235, 248, .2)\' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: \'rgba(128, 217, 248, 1)\',
// shadowColor: \'rgba(255, 255, 255, 1)\',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: \'#389BB7\',
borderWidth: 0
}
},
regions: opt.activeArea.map(function(item) {
if (typeof item !== \'string\') {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || \'#389BB7\'
}
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: \'#fff\'
}
}
}
}
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: \'#91e6ff\',
areaColor: \'#1BAFAC\'
}
}
}
}
})
},
series: [
{
type: \'effectScatter\',
coordinateSystem: \'geo\',
// symbol: \'diamond\',
showEffectOn: \'render\',
rippleEffect: {
period: 15,
scale: 6,
brushType: \'fill\'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function(params) {
return levelColorMap[params.value[3]]
},
shadowBlur: 10,
shadowColor: \'#333\'
}
},
data: handleEvents.initSeriesData(opt.data)
}
]
}
chart.setOption(option)
// 添加事件
chart.on(\'click\', function(params) {
var _self = this
if (opt.goDown && params.name !== name[idx]) {
if (cityMap[params.name]) {
var url = cityMap[params.name]
echarts.registerMap(params.name, url)
handleEvents.resetOption(_self, option, params.name)
}
}
_that.citys = params.name
console.log(_that.citys)
})
chart.setMap = function(mapName) {
var _self = this
if (mapName.indexOf(\'市\') < 0) mapName = mapName + \'市\'
var citySource = cityMap[mapName]
if (citySource) {
var url = \'./map/\' + citySource + \'.json\'
echarts.registerMap(mapName, url)
handleEvents.resetOption(_self, option, mapName)
}
// handleEvents.resetOption(this, option, mapName);
}
return chart
}
echarts.registerMap(\'江西\', jxs)
var myChart = echarts.extendsMap(\'chart-panel\', {
bgColor: \'\', // 画布背景色
mapName: \'江西\', // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
// console.log(name, option, instance);
},
// 数据展示
data: [
{
name: \'南昌\',
value: 10,
level: 1
},
{
name: \'景德镇\',
value: 12,
level: 2
},
{
name: \'萍乡\',
value: 11,
level: 3
},
{
name: \'赣州\',
value: 16,
level: 3
},
{
name: \'吉安\',
value: 12,
level: 3
},
{
name: \'上饶\',
value: 12,
level: 3
},
{
name: \'九江\',
value: 12,
level: 3
},
{
name: \'抚州\',
value: 12,
level: 3
},
{
name: \'宜春\',
value: 12,
level: 3
},
{
name: \'新余\',
value: 12,
level: 3
},
{
name: \'鹰潭\',
value: 12,
level: 3
}
]
})
}
}
}
</script>
<style scoped>
.NotiBox {
width: 100%;
position: relative;
}
.NotiBox #mapBox {
width: 45%;
min-height: 600px;
overflow: hidden;
left: -100px;
position: absolute;
float: left;
}
.leftbox {
float: left;
height: 600px;
}
.right {
width: 55%;
float: right;
height: 600px;
color: #000;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
放这段代码上去修改下 县市级地图就做好了
参考：https://gallery.echartsjs.com/editor.html?c=xqxC1bMBiF