From fce89affcbc15073f2e41b647239b3fff777006b Mon Sep 17 00:00:00 2001 From: TreeWish <1131093754@qq.com> Date: 星期一, 27 二月 2023 14:20:27 +0800 Subject: [PATCH] 修改切换逻辑 --- src/components/chart/BaseBarChart.vue | 82 +++++++++++++++++++++++++--------------- 1 files changed, 51 insertions(+), 31 deletions(-) diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue index 6a6cbfc..af16c00 100644 --- a/src/components/chart/BaseBarChart.vue +++ b/src/components/chart/BaseBarChart.vue @@ -4,20 +4,20 @@ <script> import * as echarts from "echarts" -import { countCountryDimension } from "@/api/screen.js" +import { countCountryDimension, countProvinceDimension } from "@/api/screen.js" export default { props: { width: { type: String, - default: '100%' + default: "100%", }, height: { type: String, - default: '100%' + default: "100%", }, autoResize: { type: Boolean, - default: true + default: true, }, // option: { // type: Object, @@ -25,13 +25,17 @@ // }, type: { type: String, - default: 'canvas' - } + default: "canvas", + }, + project: { + type: String, + default: "鍏ㄥ浗椤圭洰", + }, }, data() { return { chart: null, - dataList: [] + dataList: [], } }, computed: { @@ -89,7 +93,8 @@ data = this.dataList } data.forEach(item => { - xAxisData.push(item.country) + let name = item.province || item.country + xAxisData.push(name) yAxisData.push(item.count) }) let option = { @@ -234,28 +239,42 @@ }, ], } + return option - } + }, }, watch: { - // option: { - // deep: true, - // handler(newVal) { - // this.setOptions(newVal) - // } - // }, - currentProject: { + option: { deep: true, handler(newVal) { - this.initData() + this.setOptions(newVal) + }, + }, + project: { + deep: true, + handler(newVal) { + let requsetFn = null + switch (newVal) { + case "鍏ㄧ悆椤圭洰": + requsetFn = countCountryDimension + break + case "鍏ㄥ浗椤圭洰": + requsetFn = countProvinceDimension + break + + default: + break + } + this.initData(requsetFn) this.setOptions(this.option) - } - } + }, + }, }, mounted() { + this.initData() this.initChart() if (this.autoResize) { - window.addEventListener('resize', this.resizeHandler) + window.addEventListener("resize", this.resizeHandler) } }, beforeDestroy() { @@ -263,7 +282,7 @@ return } if (this.autoResize) { - window.removeEventListener('resize', this.resizeHandler) + window.removeEventListener("resize", this.resizeHandler) } this.chart.dispose() this.chart = null @@ -273,14 +292,14 @@ this.chart.resize() }, initChart() { - this.chart = echarts.init(this.$refs.chart, '', { - renderer: this.type + this.chart = echarts.init(this.$refs.chart, "", { + renderer: this.type, }) this.chart.setOption(this.option) - this.chart.on('click', this.handleClick) + this.chart.on("click", this.handleClick) }, handleClick(params) { - this.$emit('click', params) + this.$emit("click", params) }, setOptions(option) { this.clearChart() @@ -294,12 +313,13 @@ }, clearChart() { this.chart && this.chart.clear() - } - }, - methods: { - async initData() { - - + }, + async initData(requsetFn = countCountryDimension) { + const res = await requsetFn() + if (res.code == 200) { + this.dataList = res.result + console.log("requsetFn", res) + } }, }, } -- Gitblit v1.9.3