From ccfc4eacbac773d85386f93cb3e2de0973e56549 Mon Sep 17 00:00:00 2001 From: lb Date: Tue, 8 Aug 2023 10:16:53 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E6=A3=80=E6=B5=8B=E7=BB=9F=E8=AE=A1?= =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/graphs/line.vue | 154 ++++++++---------- .../qualityStatistics/graphPage.vue | 44 ++--- 2 files changed, 93 insertions(+), 105 deletions(-) diff --git a/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue b/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue index 3f3978a8..10366b3f 100644 --- a/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue +++ b/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue @@ -16,15 +16,19 @@ export default { name: 'LineDataChart', components: {}, props: { - xProps: { - type: Array, - default: () => [], - }, - legend: { - type: Array, - default: () => [], - } - }, + xProps: { + type: Array, + default: () => [], + }, + legend: { + type: Array, + default: () => [], + }, + series: { + type: Array, + default: () => [], + }, + }, data() { return { chart: null, @@ -51,89 +55,50 @@ export default { // '产线8', // '产线9', // ], - series: [ - { - name: '检测内容1', - type: 'line', - data: [120, 132, 101, 134, 90, 230, 210, 120, 132], - }, - { - name: '检测内容2', - type: 'line', - data: [220, 182, 191, 234, 290, 330, 310, 220, 182], - }, - { - name: '检测内容3', - type: 'line', - data: [150, 232, 201, 154, 190, 330, 410, 150, 232], - }, - { - name: '检测内容4', - type: 'line', - data: [320, 332, 301, 334, 390, 330, 320, 332, 301], - }, - { - name: '检测内容5', - type: 'line', - data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - { - name: '检测内容6', - type: 'line', - data: [920, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - { - name: '检测内容7', - type: 'line', - data: [1020, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - { - name: '检测内容8', - type: 'line', - data: [1120, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - { - name: '检测总数', - type: 'line', - data: [1220, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - { - name: '比例%', - type: 'line', - data: [1320, 932, 901, 934, 1290, 1330, 1320, 932, 901], - }, - ], + // series: [ + // { + // name: 'a', + // type: 'line', + // data: [120, 132, 101, 134, 90, 230, 210, 120, 132], + // }, + // { + // name: 'lkj', + // type: 'line', + // data: [220, 182, 191, 234, 290, 330, 310, 220, 182], + // }, + // { + // name: '测试11', + // type: 'line', + // data: [150, 232, 201, 154, 190, 330, 410, 150, 232], + // }, + // { + // name: '测试22', + // type: 'line', + // data: [320, 332, 301, 334, 390, 330, 320, 332, 301], + // }, + // ], }; }, - computed: {}, - mounted() { - this.init(); - }, - methods: { - init() { - if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']); - this.setOption(); - }, - setOption(option) { - console.log("legend", this.legend) - const defaultOption = { + computed: { + config() { + return { // title: { // text: '折线图', // }, - grid: { - top: '24%', - left: '3%', - right: '5%', - bottom: '5%', - containLabel: true, - }, + grid: { + top: '24%', + left: '3%', + right: '5%', + bottom: '5%', + containLabel: true, + }, tooltip: { trigger: 'axis', }, legend: { data: this.legend, - top: '5%', - icon: 'circle' + top: '5%', + icon: 'circle', }, // toolbox: { // feature: { @@ -148,9 +113,30 @@ export default { yAxis: { type: 'value', }, - series: this.series + series: this.series, }; - this.chart.setOption(defaultOption); + }, + }, + mounted() { + this.init(); + }, + watch: { + config(val) { + this.$nextTick(() => { + this.init(); + }); + }, + }, + methods: { + init() { + if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']); + + this.$nextTick(() => { + this.setOption(); + }); + }, + setOption() { + this.chart.setOption(this.config); }, }, }; diff --git a/src/views/quality/monitoring/qualityStatistics/graphPage.vue b/src/views/quality/monitoring/qualityStatistics/graphPage.vue index 49ed1936..4aa9a981 100644 --- a/src/views/quality/monitoring/qualityStatistics/graphPage.vue +++ b/src/views/quality/monitoring/qualityStatistics/graphPage.vue @@ -11,10 +11,7 @@ - + @@ -42,35 +39,40 @@ export default { data() { return { legend: [], + series: [], }; }, - computed: {}, + mounted() { + this.buildLegend(); + + this.$nextTick(() => { + this.series = this.lineData.list.map(this.buildSeries); + console.log('this.series', this.series); + }); + }, methods: { buildSeries(item) { - if (!this.legend.length) this.buildLegend(); - const data = []; - this.legend.forEach((key) => { - console.log('key item.key', item, key, item[key]); - if (item[key] == null) item[key] = null; - data.push(item[key]); - }); - console.log('buildSeries', { + console.log('this.list', this.lineData.list, this.lineData.xProps); + const seriesItem = { name: item.inspectionContent, type: 'line', - data: data, - }); - return { - name: item.inspectionContent, - type: 'line', - data: data, + data: [], }; + + this.lineData.xProps.forEach((prop) => { + if (prop in item) { + seriesItem.data.push(item[prop]); + } else { + seriesItem.data.push(null); + } + }); + + return seriesItem; }, buildLegend() { this.legend = this.lineData.list .map((item) => item.inspectionContent) .sort(); - // this.legend.push('检测总数', '比例%') - console.log('buliding legend', this.legend); }, }, };