效果图
1. template
结构
<template>
<div class="wrap" style="position: relative; width: 100%">
<div id="map" style="width: 100%; height: 835px;"></div>
</div>
</template>
2. 引用
bj.json
是北京市的json数据,不能暴露echarts官方的Amd规范的js文件,参考这篇
import * as esriLoader from 'esri-loader'
import $ from 'jquery'
import echarts from 'echarts'
import beijing from '../../assets/js/mapchart/bj.json'
3. export default
测试功能,虚拟数据
export default {
data() {
return {
geoCoordMap: {
东城区: [116.418757, 39.937544],
西城区: [116.366794, 39.910309],
朝阳区: [116.486409, 39.991489],
丰台区: [116.286968, 39.863642],
石景山区: [116.170445, 39.974601],
海淀区: [116.280316, 40.039074],
门头沟区: [115.905381, 40.009183],
房山区: [115.701157, 39.735535],
通州区: [116.758603, 39.802486],
顺义区: [116.753525, 40.128936],
昌平区: [116.235906, 40.318085],
大兴区: [116.338033, 39.658908],
怀柔区: [116.607122, 40.524272],
平谷区: [117.112335, 40.244783],
密云区: [116.943352, 40.477362],
延庆区: [115.985006, 40.465325]
},
rawData: [
// ["东城区",10,20,30],
// ["西城区",10,20,30],
['朝阳区', 0.0544, 2.1299, 6.3964],
['丰台区', 0.056, 1.892, 6.434],
['石景山区', 0.043, 1.967, 5.842],
['海淀区', 0.053, 2.143, 6.543],
['门头沟区', 0.034, 1.907, 5.434],
['房山区', 0.038, 2.231, 4.34],
['通州区', 0.023, 2.201, 4.58],
['顺义区', 0.037, 2.231, 5.21],
['昌平区', 0.025, 2.542, 4.85],
['大兴区', 0.043, 2.145, 3.82],
['怀柔区', 0.032, 1.981, 4.74],
['平谷区', 0.042, 1.992, 4.30],
['密云区', 0.032, 2.090, 3.99],
['延庆区', 0.046, 2.313, 3.84]
]
}
},
mounted() {
echarts.registerMap('BJ', beijing)
esriLoader.setDefaultOptions({ version: '3.31' })
this.createMap(this)
},
methods: {
createMap: function (that) {
var myChart = echarts.init(document.getElementById('map'))
var option = {
animation: false,
tooltip: {
trigger: 'axis'
},
geo: {
map: 'BJ',
// silent: true,
roam: true,
zoom: 1.155,
center: [116.366794, 40.400309],
label: {
emphasis: {
show: false,
areaColor: '#eee'
}
},
itemStyle: {
normal: {
areaColor: '#EECFA1',
borderColor: '#FFF'
},
emphasis: {
areaColor: '#C1CDC1'
}
}
},
series: []
}
function renderEachCity() {
option = {
xAxis: [],
yAxis: [],
grid: [],
series: [],
tooltip: {
trigger: 'item',
axisPointer: {
type: 'none'
}
}
}
if (that.rawData !== undefined) {
that.rawData.forEach(function (dataItem, idx) {
console.log(idx)
var geoCoord = that.geoCoordMap[dataItem[0]]
var coord = myChart.convertToPixel('geo', geoCoord)
idx += ''
var inflationData = []
for (var k = 1; k < 4; k++) {
inflationData.push(dataItem[k])
}
option.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
name: dataItem[0],
nameLocation: 'middle',
nameGap: 3,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#666'
}
},
// data: xAxisCategory,
data: ['二阶', '一阶', 'b'],
z: 100
})
option.yAxis.push({
id: idx,
gridId: idx,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#1C70B6'
}
},
z: 100
})
option.grid.push({
id: idx,
width: 30,
height: 40,
left: coord[0] - 15,
top: coord[1] - 15,
z: 100
})
option.series.push({
id: idx,
type: 'bar',
xAxisId: idx,
yAxisId: idx,
barGap: 0,
barCategoryGap: 0,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#F75D5D', '#59ED4F', '#4C91E7']
return colorList[params.dataIndex]
}
},
emphasis: {
label: {
show: false
}
}
}
})
}, that.rawData)
} else {
console.log('error')
}
myChart.setOption(option)
}
setTimeout(renderEachCity, 0)
function throttle(fn, delay, debounce) {
var currCall
var lastCall = 0
var lastExec = 0
var timer = null
var diff
var scope
var args
delay = delay || 0
function exec() {
lastExec = (new Date()).getTime()
timer = null
fn.apply(scope, args || [])
}
var cb = function () {
currCall = (new Date()).getTime()
scope = that
args = arguments
diff = currCall - (debounce ? lastCall : lastExec) - delay
clearTimeout(timer)
if (debounce) {
timer = setTimeout(exec, delay)
} else {
if (diff >= 0) {
exec()
} else {
timer = setTimeout(exec, -diff)
}
}
lastCall = currCall
}
return cb
}
var throttledRenderEachCity = throttle(renderEachCity, 0)
myChart.on('geoRoam', throttledRenderEachCity)
myChart.setOption(option)
myChart.on('click', function (e) {
console.log(e)
// console.log(params);
if (e.componentSubType === 'bar') {
$('.tongJiTu').remove()
creatWrap()
var divObj = document.createElement('div')
$(divObj).addClass('tongJiTu')
divObj.id = 'zhuzhuang'
var divX = getMousePos().x
var divY = getMousePos().y
$(divObj).css({
width: 250,
height: 300,
border: '1px solid #ccc',
position: 'absolute',
top: divY,
left: divX
}).appendTo('.wrap')
zhuZhuangTu(e)
clearWrap('.zhedang')
}
})
// 获取横纵坐标
function getMousePos(event) {
var e = event || window.event
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
var scrollY = document.documentElement.scrollTop || document.body.scrollTop
var x = e.pageX || e.clientX + scrollX
var y = e.pageY || e.clientY + scrollY
// console.log(x,y)
return { x: x, y: y }
}
// 生成柱状图
function zhuZhuangTu(e) {
var index = e.seriesIndex
var infodata = []
for (var k = 1; k < 4; k++) {
infodata.push(that.rawData[index][k])
console.log(infodata)
}
var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'))
option = {
backgroundColor: 'rgba(255,255,255,.6)',
legend: {
data: ['二阶', '一阶', 'b']
},
xAxis: [
{
type: 'category',
data: ['二阶', '一阶', 'b']
}
],
yAxis: [
{
splitLine: {
show: false
},
type: 'value'
}
],
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#F75D5D', '#59ED4F', '#4C91E7']
return colorList[params.dataIndex]
}
}
},
data: infodata
}
]
}
zhuzhuang.setOption(option)
}
// 生成遮挡层
function creatWrap() {
var zheDang = document.createElement('div')
$(zheDang).addClass('zhedang').css({
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,.3)'
}).appendTo('.wrap')
}
// 去掉遮挡层
function clearWrap(id) {
$(id).click(function (e) {
// console.log(that);
this.remove()
$('.tongJiTu').remove()
return false
})
}
}
}
}