diff --git a/ui/dv/AiDvMap.vue b/ui/dv/AiDvMap.vue index decb9f83..be34da87 100644 --- a/ui/dv/AiDvMap.vue +++ b/ui/dv/AiDvMap.vue @@ -18,7 +18,6 @@ export default { data() { return { chart: null, - geo: null } }, directives: { @@ -52,15 +51,6 @@ export default { mounted() { this.$load(this.$refs.dvMap).then(() => this.initChart()) }, - watch: { - data: { - deep: true, handler(v) { - this.chart.setOption({ - geo: [{data: v}] - }) - } - } - }, methods: { onDomResize() { this.$nextTick(() => { @@ -74,12 +64,9 @@ export default { text: "数据加载中...", textColor: "#fff", maskColor: 'rgba(0, 0, 0, 0.2)' }) - Promise.all([ - this.getData(this.geoJson).then(res => this.geo = res?.data), - // waitFor(this.data) - ]).then(() => { - if (!!this.geo) { - echarts.registerMap('customMap', this.geo) + this.getData(this.geoJson).then(res => { + if (!!res?.data) { + echarts.registerMap('customMap', res.data) const option = { geo: [ // 重影 @@ -107,48 +94,49 @@ export default { }, } }), - { - map: "customMap", - aspectScale: 1, - zoom: 0.65, - layoutCenter: ["50%", "50%"], - layoutSize: "180%", + ], + series: { + type: "map", + map: "customMap", + aspectScale: 1, + zoom: 0.65, + layoutCenter: ["50%", "50%"], + layoutSize: "180%", + show: true, + roam: false, + selectedMode: 'single', + emphasis: { show: true, - roam: false, - selectedMode: 'single', - emphasis: { - show: true, - label: { - textStyle: { - color: "#FFFFFF" - }, - }, - itemStyle: { - areaColor: '#02C6DC' - } - }, - select: { - label: { - color: "#fff" - }, - itemStyle: { - areaColor: '#02bcff29' - } - }, label: { - show: true, - color: '#fff', - fontSize: 22 + textStyle: { + color: "#FFFFFF" + }, }, itemStyle: { - borderColor: "rgba(2, 198, 220, 1)", - borderWidth: 2, - areaColor: "#02bcff29", - shadowBlur: 120, - }, - data: this.data + areaColor: '#02C6DC' + } }, - ], + select: { + label: { + color: "#fff" + }, + itemStyle: { + areaColor: '#02bcff29' + } + }, + label: { + show: true, + color: '#fff', + fontSize: 22 + }, + itemStyle: { + borderColor: "rgba(2, 198, 220, 1)", + borderWidth: 2, + areaColor: "#02bcff29", + shadowBlur: 120, + }, + data: this.data + }, ...this.ops // geo3D: { // map: "customMap", @@ -179,7 +167,7 @@ export default { // }, } this.chart.setOption(option) - this.chart.on('click', evt => this.$emit("click", {...evt, info: this.geo.features.find(e => e.properties?.name == evt.name)?.properties})) + this.chart.on('click', evt => this.$emit("click", {...evt, info: res.data.features.find(e => e.properties?.name == evt.name)?.properties})) this.chart.on('globalout', () => this.$emit("globalout")) } return 1 diff --git a/ui/dv/AiLinkageMap.vue b/ui/dv/AiLinkageMap.vue index 3ccc03ea..65ff328d 100644 --- a/ui/dv/AiLinkageMap.vue +++ b/ui/dv/AiLinkageMap.vue @@ -19,18 +19,26 @@ export default { type: "piecewise", splitNumber: 8, min: 0, - max: 800, + max: 8000, + maxOpen: true, inRange: { - color: ["#0CDEE9", "#0BD0DA", "#0BC1D5", "#0BACC1", "#0993AE", "#076C88", "#064E6B", "#054261"].reverse() - }, - outOfRange: { - color: "#25EDF4" + color: [ + "#25EDF4", + "rgba(12,222,233,0.9)", + "rgba(11,208,218,0.81)", + "rgba(11,193,213,0.72)", + "rgba(11,172,193,0.63)", + "rgba(9,147,174,0.54)", + "rgba(7,108,136,0.45)", + "rgba(6,78,107,0.36)", + "rgba(5,66,97,0.27)"].reverse() }, + outOfRange: {color: "#25EDF4"}, textStyle: { color: "#fff" }, calculable: true - } + }, }, dialog: false, detail: [], @@ -54,7 +62,11 @@ export default { getData(type = "530300000000") { return this.compData.getData({type}).then(res => { const json = JSON.parse(res.param) - this.geoData = json.map + if (type == "530300000000") { + this.geoData = json.map + this.$refs.map.chart?.setOption({series: {data: this.mapData}}) + console.log(this.$refs.map.chart?.getOption()?.series) + } this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || [] }) },