为地图增加颜色

This commit is contained in:
aixianling
2024-09-25 10:50:28 +08:00
parent 0c9b5d522e
commit 80978d3794
2 changed files with 32 additions and 9 deletions

View File

@@ -686,7 +686,7 @@ export default {
}
})
},
renderMap(areaId, cb) {
renderMap(areaId, reload = true) {
const mapGeo = this.$copy(weiyang)
let scatters = []
if (areaId) {
@@ -699,8 +699,23 @@ export default {
})
}
this.$nextTick(() => {
const colors = {
三桥街道: "#EBADC8",
建章路街道: "#B886EA",
未央宫街道: "#A8B4F0",
六村堡街道: "#35FDFC",
汉城街道: "#37FBB9",
张家堡街道: "#D8F98A",
草滩街道: "#25B3F8",
未央湖街道: "#73DCFC",
徐家湾街道: "#F3C83F",
谭家街道: "#FD9004",
辛家庙街道: "#F3C83F",
大明宫街道: "#FB3744",
}
const regions = Object.entries(colors).map(([name, color]) => ({name, itemStyle: {areaColor: `${color}80`, borderColor: color, borderWidth: 1}}))
const options = this.$refs.map.handleMapOps(mapGeo, {
geo: {label: {show: false}},
geo: {label: {show: false}, regions},
series: {
type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#4DF6FF'},
select: {itemStyle: {color: '#FFC800'}},
@@ -721,10 +736,18 @@ export default {
${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop => `<div class="flex" style="line-height: 22px;">
<span class="fill" style="color:#99B5D2">${this.getLabel(prop)}</span> ${item[prop] || 0}</div>`).join("")}</div>`
}
}
},
// toolbox: {
// feature: {restore: {title: "重置"}},
// }
}, true)
if (cb) cb(mapGeo, options)
else this.chart.map.setOption(options)
this.map = mapGeo
this.mapOps = options
this.chart.map.dispatchAction({type: 'restore'})
if (reload) {
this.chart.map.clear()
this.chart.map.setOption(options)
}
})
},
handleBack() {
@@ -735,10 +758,7 @@ ${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop =>
this.renderMap()
} else if (lv == 4) {
this.areaId = Area.getAreaCodeByLevel(areaCode, lv - 1)
this.renderMap(this.areaId, (geo, ops) => {
this.map = geo
this.mapOps = ops
})
this.renderMap(this.areaId, false)
}
}
},

View File

@@ -116,6 +116,9 @@ export default {
initChart() {
const {echarts} = window
this.chart = echarts.init(this.$refs.dvMap)
this.chart.on('finished', () => {
console.log(this.chart.getOption())
})
this.chart.showLoading({
text: "数据加载中...", textColor: "#fff",
maskColor: 'rgba(0, 0, 0, 0.2)'