Echarts市县级地图下钻（纯代码）
实现工具：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
