From d1132f2bfff27415f1f31346ba8b01b921153e51 Mon Sep 17 00:00:00 2001 From: wangqiujuan0808 <578331299@qq.com> Date: Wed, 1 Nov 2023 22:18:06 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Zhibiao2.vue | 2 +- src/components/Zhibiao3.vue | 552 +++++++++++++++++++++++--------- src/components/Zhibiao4.vue | 607 ++++++++++++++++++++++++++++-------- 3 files changed, 885 insertions(+), 276 deletions(-) diff --git a/src/components/Zhibiao2.vue b/src/components/Zhibiao2.vue index 8daad4c..00c3bcc 100644 --- a/src/components/Zhibiao2.vue +++ b/src/components/Zhibiao2.vue @@ -323,7 +323,7 @@ export default { }; getEchart(dom, op); }; - const getChartsZf3 = (id, text) => { + const getChartsZf3 = (id, text) => { var dom = document.getElementById(id); console.log(dom); var op = { diff --git a/src/components/Zhibiao3.vue b/src/components/Zhibiao3.vue index 03cf553..f9b917b 100644 --- a/src/components/Zhibiao3.vue +++ b/src/components/Zhibiao3.vue @@ -24,38 +24,38 @@ export default { }); onMounted(async () => { getChartsZfl("echartDiv1", '渗透量'); - getChartsZfl("echartDiv2", '透水铺砖表面温度'); - getChartsZfl("echartDiv3", '热岛消减率'); + getChartsZf2("echartDiv2", '透水铺砖表面温度'); + getChartsZf3("echartDiv3", '热岛消减率'); }); const getChartsZfl = (id, text) => { var dom = document.getElementById(id); console.log(dom); var op = { - color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], + color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FFBF00", "#FF0087"], title: { - text: text + text: text, }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'cross', + type: "cross", label: { - backgroundColor: '#6a7985' - } - } + backgroundColor: "#6a7985", + }, + }, }, legend: { - data: ['系统A', '系统B', '系统C', '系统D', '系统E'] + data: ["系统A", "系统B", "系统C", "系统D", "系统E"], }, grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, }, xAxis: [ { - type: 'category', + type: "category", boundaryGap: false, data: [ "00", @@ -82,158 +82,432 @@ export default { "21", "22", "23", - ] - } + ], + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ { - name: '系统A', - type: 'line', - stack: 'Total', + name: "系统A", + type: "line", + stack: "Total", smooth: true, lineStyle: { - width: 0 + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#80FFA5" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, + 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, + ], + }, + { + name: "系统B", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#00DDFF" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, + 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340, + ], + }, + { + name: "系统C", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, }, showSymbol: false, areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(128, 255, 165)' - }, - { - offset: 1, - color: 'rgb(1, 191, 236)' - } - ]) + opacity: 0.5, + color: "#37A2FF" }, emphasis: { - focus: 'series' + focus: "series", }, - data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101] + data: [ + 320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, + 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220, + ], }, { - name: '系统B', - type: 'line', - stack: 'Total', + name: "系统D", + type: "line", + stack: "Total", smooth: true, lineStyle: { - width: 0 - }, - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(0, 221, 255)' - }, - { - offset: 1, - color: 'rgb(77, 119, 255)' - } - ]) - }, - emphasis: { - focus: 'series' - }, - data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340] - }, - { - name: '系统C', - type: 'line', - stack: 'Total', - smooth: true, - lineStyle: { - width: 0 - }, - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(55, 162, 255)' - }, - { - offset: 1, - color: 'rgb(116, 21, 219)' - } - ]) - }, - emphasis: { - focus: 'series' - }, - data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220] - }, - { - name: '系统D', - type: 'line', - stack: 'Total', - smooth: true, - lineStyle: { - width: 0 - }, - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(255, 0, 135)' - }, - { - offset: 1, - color: 'rgb(135, 0, 157)' - } - ]) - }, - emphasis: { - focus: 'series' - }, - data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700] - }, - { - name: '系统E', - type: 'line', - stack: 'Total', - smooth: true, - lineStyle: { - width: 0 + width: 0, }, showSymbol: false, label: { show: true, - position: 'top' + position: "top", }, areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(255, 191, 0)' - }, - { - offset: 1, - color: 'rgb(224, 62, 76)' - } - ]) + opacity: 0.5, + color: "#FFBF00" }, emphasis: { - focus: 'series' + focus: "series", }, - data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200] - } - ] + data: [ + 220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, + 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200, + ], + }, + { + name: "系统E", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#FF0087" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, + 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, + ], + }, + ], }; - getEchart(dom, op) - } + getEchart(dom, op); + }; + const getChartsZf2 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + title: { + text: text, + }, + color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + legend: {}, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: [ + "00", + "01", + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "09", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + ], + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "系统A", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, + 210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, + ], + }, + { + name: "系统B", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210, + 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230, + ], + }, + { + name: "系统C", + type: "bar", + barWidth: "8", + // stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统D", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统E", + type: "bar", + barWidth: "8", + // stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + ], + }; + getEchart(dom, op); + }; + const getChartsZf3 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + color: ["#eceff7", "#fff2f9", "#8bc4f8", "#fd9d48", "#9485be"], + title: { + text: text, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "cross", + label: { + backgroundColor: "#6a7985", + }, + }, + }, + legend: { + data: ["系统A", "系统B", "系统C", "系统D", "系统E"], + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + data: [ + "00", + "01", + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "09", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + ], + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "系统A", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#eceff7" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, + 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, + ], + }, + { + name: "系统B", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#fff2f9" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, + 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340, + ], + }, + { + name: "系统C", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + showSymbol: false, + areaStyle: { + opacity: 0.5, + color: "#8bc4f8" + }, + emphasis: { + focus: "series", + }, + data: [ + 320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, + 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220, + ], + }, + { + name: "系统D", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + showSymbol: false, + label: { + show: true, + position: "top", + }, + areaStyle: { + opacity: 0.5, + color: "#fd9d48" + }, + emphasis: { + focus: "series", + }, + data: [ + 220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, + 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200, + ], + }, + { + name: "系统E", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.5, + color: "#9485be" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, + 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, + ], + }, + ], + }; + getEchart(dom, op); + }; const getEchart = (dom, op) => { if (dom) { // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染 diff --git a/src/components/Zhibiao4.vue b/src/components/Zhibiao4.vue index 4228d7c..e1451c3 100644 --- a/src/components/Zhibiao4.vue +++ b/src/components/Zhibiao4.vue @@ -25,41 +25,168 @@ export default { }); onMounted(async () => { - getChartsZfl("echartDiv1", '蒸腾量'); - getChartsZfl("echartDiv2", 'COD'); - getChartsZfl("echartDiv3", '氨氮'); + getChartsZfl("echartDiv1", '调蓄池液位'); + getChartsZf2("echartDiv2", 'COD'); + getChartsZf3("echartDiv3", '氨氮'); getChartsZfl("echartDiv4", 'SS'); - getChartsZfl("echartDiv5", '屋面温度'); + getChartsZf4("echartDiv5", '溢流量'); }); const getChartsZfl = (id, text) => { var dom = document.getElementById(id); console.log(dom); var op = { - color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], title: { - text: text + text: text, }, + color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } - }, - legend: { - data: ['系统A', '系统B', '系统C', '系统D', '系统E'] + type: "shadow", + }, }, + legend: {}, grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, }, xAxis: [ { - type: 'category', + type: "category", + data: [ + "00", + "01", + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "09", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + ], + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "系统A", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, + 210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, + ], + }, + { + name: "系统B", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210, + 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230, + ], + }, + { + name: "系统C", + type: "bar", + barWidth: "8", + // stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统D", + type: "bar", + // stack: "Ad", + barWidth: "8", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统E", + type: "bar", + barWidth: "8", + // stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + ], + }; + getEchart(dom, op); + }; + const getChartsZf2 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"], + title: { + text: text, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "cross", + label: { + backgroundColor: "#6a7985", + }, + }, + }, + legend: { + data: ["系统A", "系统B", "系统C", "系统D", "系统E"], + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", boundaryGap: false, data: [ "00", @@ -86,158 +213,366 @@ export default { "21", "22", "23", - ] - } + ], + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ { - name: '系统A', - type: 'line', - stack: 'Total', + name: "系统A", + type: "line", + stack: "Total", smooth: true, lineStyle: { - width: 0 + width: 0, + }, + areaStyle: { + color: "#80FFA5" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, + 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, + ], + }, + { + name: "系统B", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + color: "#00DDFF" + }, + showSymbol: false, + emphasis: { + focus: "series", + }, + data: [ + 120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, + 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340, + ], + }, + { + name: "系统C", + type: "line", + stack: "Total", + smooth: true, + lineStyle: { + width: 0, }, showSymbol: false, areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(128, 255, 165)' - }, - { - offset: 1, - color: 'rgb(1, 191, 236)' - } - ]) + color: "#37A2FF" }, emphasis: { - focus: 'series' + focus: "series", }, - data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101] + data: [ + 320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, + 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220, + ], }, { - name: '系统B', - type: 'line', - stack: 'Total', + name: "系统D", + type: "line", + stack: "Total", smooth: true, lineStyle: { - width: 0 + width: 0, + }, + areaStyle: { + color: "#FF0087" }, showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(0, 221, 255)' - }, - { - offset: 1, - color: 'rgb(77, 119, 255)' - } - ]) - }, emphasis: { - focus: 'series' + focus: "series", }, - data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340] + data: [ + 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, + 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, + ], }, { - name: '系统C', - type: 'line', - stack: 'Total', + name: "系统E", + type: "line", + stack: "Total", smooth: true, lineStyle: { - width: 0 - }, - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(55, 162, 255)' - }, - { - offset: 1, - color: 'rgb(116, 21, 219)' - } - ]) - }, - emphasis: { - focus: 'series' - }, - data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220] - }, - { - name: '系统D', - type: 'line', - stack: 'Total', - smooth: true, - lineStyle: { - width: 0 - }, - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(255, 0, 135)' - }, - { - offset: 1, - color: 'rgb(135, 0, 157)' - } - ]) - }, - emphasis: { - focus: 'series' - }, - data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700] - }, - { - name: '系统E', - type: 'line', - stack: 'Total', - smooth: true, - lineStyle: { - width: 0 + width: 0, }, showSymbol: false, label: { show: true, - position: 'top' + position: "top", }, areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(255, 191, 0)' - }, - { - offset: 1, - color: 'rgb(224, 62, 76)' - } - ]) + color: "#FFBF00" }, emphasis: { - focus: 'series' + focus: "series", }, - data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200] - } - ] + data: [ + 220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, + 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200, + ], + }, + ], }; - getEchart(dom, op) - } + getEchart(dom, op); + }; + const getChartsZf3 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + title: { + text: text, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + legend: {}, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: [ + "00", + "01", + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "09", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + ], + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "系统A", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, + 210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, + ], + }, + { + name: "系统B", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210, + 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230, + ], + }, + { + name: "系统C", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统D", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统E", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + ], + }; + getEchart(dom, op); + }; + const getChartsZf4 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + title: { + text: text, + }, + color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + legend: {}, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: [ + "00", + "01", + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "09", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + ], + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "系统A", + type: "bar", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, + 210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, + ], + }, + { + name: "系统B", + type: "bar", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210, + 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230, + ], + }, + { + name: "系统C", + type: "bar", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统D", + type: "bar", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + { + name: "系统E", + type: "line", + stack: "Ad", + emphasis: { + focus: "series", + }, + data: [ + 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, + 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, + ], + }, + ], + }; + getEchart(dom, op); + }; const getEchart = (dom, op) => { if (dom) { // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染