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' + '<br />' +
'功率1: ' + params.data.fdOutput.toFixed(2) + 'MW' + '<br />' +
'容量2: ' + params.data.gfInstall.toFixed(2) + 'MW' + '<br />' +
'功率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: item