echarts地图上绘制堆叠柱状图并切换地市
1、echarts地图上绘制堆叠柱状图
1、js
import echarts from 'echarts'
function initMap(myChart, region, geoCoordMap, rawData) {
myChart.showLoading()
// 市区坐标
let option = {
tooltip: {
show: true,
trigger: 'item',
// 是否设置让提示框的内容一直显示 默认值是false
alwaysShowContent: false,
formatter: function(params, val, item) {
console.log(params, val, item)
return (
'容量1: ' + params.data.fdInstall.toFixed(2) + 'MW' + '
' +
'功率1: ' + params.data.fdOutput.toFixed(2) + 'MW' + '
' +
'容量2: ' + params.data.gfInstall.toFixed(2) + 'MW' + '
' +
'功率2: ' + params.data.gfOutput.toFixed(2) + 'MW'
)
},
},
legend: {
right: '5%',
bottom: '5%',
selectedMode: false, //关闭图例点击事件
orient: 'vertical',
data: ['容量1', '功率1', '容量2', '功率2'],
itemWidth: 20,
itemHeight: 14,
textStyle: {
color: '#FFFFFF',
padding: 5,
},
},
geo: {
map: region,
selectedMode: false, //是否允许选中多个区域，
zoom: 1.1,
show: true,
roam: true,
// zlevel: 10,
markLine: {
lineStyle: {
color: '#fff',
},
},
label: {
show: false,
color: '#fff',
fontWeight: 'bolder',
emphasis: {
show: false,
color: '#ff0',
},
},
itemStyle: {
normal: {
borderColor: 'rgb(48,255,239)',
borderWidth: 1,
areaColor: 'RGB(6,31,51)',
// areaColor: 'RGBA(0,204,255, 0.2)',
shadowColor: 'rgba(88,175,190, 0.8)',
shadowBlur: 6,
shadowOffsetY: 5,
},
emphasis: {
borderColor: '#FFFF0F',
shadowBlur: 6,
areaColor: 'rgba(88,175,190, 0.8)',
},
},
// 设置地图上默认高亮的区域
// regions:[
// {name: '青岛市', selected:true}
// ]
},
series: [],
}
function renderEachCity() {
var option = {
xAxis: [],
yAxis: [],
grid: [],
series: [],
}
echarts.util.each(rawData, function(dataItem, idx) {
var geoCoord = geoCoordMap[dataItem[0]]
var coord = myChart.convertToPixel('geo', geoCoord)
idx += ''
var item1 = dataItem[1] * 1;
var item2 = dataItem[2] * 1;
var item3 = dataItem[3] * 1;
var item4 = dataItem[4] * 1;
var data1 = {
name: 'data1',
value: item1,
fdInstall: item1 + item2,
fdOutput: item2,
gfInstall: item3 + item4,
gfOutput: item4
}
var data2 = {
name: 'data2',
value: item2,
fdInstall: item1 + item2,
fdOutput: item2,
gfInstall: item3 + item4,
gfOutput: item4
}
var data3 = {
name: 'data3',
value: item3,
fdInstall: item1 + item2,
fdOutput: item2,
gfInstall: item3 + item4,
gfOutput: item4
}
var data4 = {
name: 'data4',
value: item4,
fdInstall: item1 + item2,
fdOutput: item2,
gfInstall: item3 + item4,
gfOutput: item4
}
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: '#fff',
},
},
// data: xAxisCategory,
// data: ['数据A', '数据B', '数据C'],
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: 50,
left: coord[0] - 15,
top: coord[1] - 15,
z: 100,
})
option.series.push({
name: '功率1',
type: 'bar',
coordinateSystem: 'cartesian2d',
xAxisIndex: idx,
yAxisIndex: idx,
stack: idx + '功率1',
z: 5,
barGap: '20%',
// barCategoryGap:'-100%',
label: {
normal: {
// show: true,
position: 'right',
},
},
itemStyle: {
normal: {
// color: '#23B7FD',
color: '#054FC6',
},
},
// data: [item2],
data: [data2]
})
option.series.push({
name: '容量1',
type: 'bar',
xAxisIndex: idx,
yAxisIndex: idx,
stack: idx + '容量1',
z: 5,
label: {
normal: {
// show: true,
position: 'right',
},
},
itemStyle: {
normal: {
// color: '#054FC6',
color: '#23B7FD',
},
},
// data: [item1],
data: [data1]
})
option.series.push({
name: '功率2',
type: 'bar',
xAxisIndex: idx,
yAxisIndex: idx,
stack: idx + '功率2',
z: 5,
label: {
normal: {
// show: true,
position: 'right',
},
},
itemStyle: {
normal: {
color: '#DE890F',
// color: '#D4AF16',
},
},
// data: [item4],
data: [data4]
})
option.series.push({
name: '容量2',
type: 'bar',
xAxisIndex: idx,
yAxisIndex: idx,
stack: idx + '容量2',
z: 5,
label: {
normal: {
// show: true,
position: 'right',
},
},
itemStyle: {
normal: {
// color: '#DE890F',
color: '#D4AF16',
},
},
// data: [item3],
data: [data3]
})
})
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 = this
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.hideLoading() //数据加载完关闭loading动画
}
export { initMap }2、vue文件
// 引入山东地图数据
import shandong from '@/assets/map/shandong.json'
import binzhou from '@/assets/map/shandong/binzhou.json'
import dezhou from '@/assets/map/shandong/dezhou.json'
import dongying from '@/assets/map/shandong/dongying.json'
import heze from '@/assets/map/shandong/heze.json'
import jinan from '@/assets/map/shandong/jinan.json'
import jining from '@/assets/map/shandong/jining.json'
import laiwu from '@/assets/map/shandong/laiwu.json'
import liaocheng from '@/assets/map/shandong/liaocheng.json'
import linyi from '@/assets/map/shandong/linyi.json'
import qingdao from '@/assets/map/shandong/qingdao.json'
import rizhao from '@/assets/map/shandong/rizhao.json'
import taian from '@/assets/map/shandong/taian.json'
import weifang from '@/assets/map/shandong/weifang.json'
import weihai from '@/assets/map/shandong/weihai.json'
import yantai from '@/assets/map/shandong/yantai.json'
import zaozhuang from '@/assets/map/shandong/zaozhuang.json'
import zibo from '@/assets/map/shandong/zibo.json'
export default {
data() {
return {
mapData: {
济南: [117.200923, 37.005807],
青岛: [120.355173, 36.882982],
淄博: [118.147648, 37.014939],
枣庄: [117.607964, 35.056424],
东营: [118.66471, 37.834564],
烟台: [121.001382, 37.339297],
潍坊: [119.107078, 36.70925],
济宁: [116.587245, 35.515393],
泰安: [117.029063, 36.304968],
威海: [122.116394, 37.609691],
日照: [119.261208, 35.928588],
莱芜: [117.677736, 36.614397],
临沂: [118.326443, 35.565282],
德州: [116.607428, 37.553968],
聊城: [115.980367, 36.756013],
滨州: [117.786974, 37.953542],
菏泽: [115.769381, 35.246531],
}
}
},
created() {
let jsonMap = {
山东: shandong,
滨州: binzhou,
德州: dezhou,
东营: dongying,
菏泽: heze,
济南: jinan,
济宁: jining,
莱芜: laiwu,
聊城: liaocheng,
临沂: linyi,
青岛: qingdao,
日照: rizhao,
泰安: taian,
潍坊: weifang,
威海: weihai,
烟台: yantai,
枣庄: zaozhuang,
淄博: zibo,
}
//循环遍历注册地图
for (let key in jsonMap) {
this.$echarts.registerMap(key, jsonMap[key])
}
},
methods: {
getMapData() {
this.mapChart = this.$echarts.init(document.getElementById('SDmap'))
this.mapChart.clear();
this.mapChart.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#222',
maskColor: 'transparent',
zlevel: 0,
}); //数据加载完之前先显示一段简单的loading动画
let geoCoordMap = {}
let rawData = []
let city = this.grid
let coordinate = this.mapData[city]
reqMapPower()
.then((res) => {
this.mapChart.clear()
let data = {
rawData: [
["济南市", "12.00", "2.01", "9.06", null],
["青岛市", "61.25", "12.46", "20.00", null],
["淄博市", "23.00", "-0.77", "21.07", null],
["枣庄市", "36.00", "8.65", "38.56", null],
["东营市", "89.10", "8.50", "10.28", null],
["烟台市", "32.50", "96.98", "119.00", null],
["潍坊市", "19.85", "7.43", "30.91", null],
["济宁市", "24.30", "2.12", "88.50", null],
["泰安市", "73.59", "2.99", "83.60", null],
["威海市", "98.65", "50.46", "7.33", null],
["日照市", "31.30", "5.65", "200.02", null],
["莱芜市", "49.00", "0.22", "20.51", null],
["临沂市", "52.80", "35.25", "345.95", null],
["德州市", "66.00", "4.08", "22.66", null],
["聊城市", "0.00", "0.00", "59.04", null],
["滨州市", "52.70", "69.29", "42.04", null],
["菏泽市", "59.00", "61.93", "27.21", null],
]
}
rawData = data.rawData
rawData.forEach((item) => {
item[0] = item[0].substring(0, 2);
item[1] = item[1] * 1 - item[2] * 1;
item[3] = item[3] * 1 - item[4] * 1;
})
console.log(rawData)
switch (this.grid) {
case '山东':
geoCoordMap = this.mapData
break
case '济南':
geoCoordMap = {
济南: coordinate,
}
break
case '青岛':
geoCoordMap = {
青岛: coordinate,
}
break
case '淄博':
geoCoordMap = {
淄博: coordinate,
}
break
case '枣庄':
geoCoordMap = {
枣庄: coordinate,
}
break
case '东营':
geoCoordMap = {
东营: coordinate,
}
break
case '烟台':
geoCoordMap = {
烟台: coordinate,
}
break
case '潍坊':
geoCoordMap = {
潍坊: coordinate,
}
break
case '济宁':
geoCoordMap = {
济宁: coordinate,
}
break
case '泰安':
geoCoordMap = {
泰安: coordinate,
}
break
case '威海':
geoCoordMap = {
威海: coordinate,
}
break
case '日照':
geoCoordMap = {
日照: coordinate,
}
break
case '莱芜':
geoCoordMap = {
莱芜: coordinate,
}
break
case '临沂':
geoCoordMap = {
临沂: coordinate,
}
break
case '德州':
geoCoordMap = {
德州: coordinate,
}
break
case '聊城':
geoCoordMap = {
聊城: coordinate,
}
break
case '滨州':
geoCoordMap = {
滨州: coordinate,
}
break
case '菏泽':
geoCoordMap = {
菏泽: coordinate,
}
break
}
// rawData = [["烟台", "300", "124", "110", "12"], ["潍坊", "190", "98", "103", "50"]]
initMap(this.mapChart, this.grid, geoCoordMap, rawData)
})
.catch(() => {})
}
}