From 26d29fcdc5adeaa30f94028a25fa8084fb058073 Mon Sep 17 00:00:00 2001 From: wangqiujuan0808 <578331299@qq.com> Date: Wed, 1 Nov 2023 21:31:57 +0800 Subject: [PATCH] =?UTF-8?q?.=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Zhibiao1.vue | 909 ++++++++++++++++++------------------ src/components/Zhibiao2.vue | 659 ++++++++++++++++++++------ src/components/Zhibiao3.vue | 12 +- 3 files changed, 979 insertions(+), 601 deletions(-) diff --git a/src/components/Zhibiao1.vue b/src/components/Zhibiao1.vue index 06881a8..0824b3f 100644 --- a/src/components/Zhibiao1.vue +++ b/src/components/Zhibiao1.vue @@ -1,10 +1,9 @@ @@ -17,307 +16,44 @@ import Process from "./Process.vue"; import Date from "@/components/Date.vue"; export default { name: "Analyse", - components: { - - }, + components: {}, setup() { - const state = reactive({ - - }); + const state = reactive({}); onMounted(async () => { - getChartsZfl("echartDiv1", '蒸腾量'); - getChartsZf2("echartDiv2", 'COD'); - getChartsZf3("echartDiv3", '氨氮'); - getChartsZf4("echartDiv4", 'SS'); - getChartsZf5("echartDiv5", '屋面温度'); + getChartsZfl("echartDiv1", "蒸腾量"); + getChartsZf2("echartDiv2", "SS"); + getChartsZf3("echartDiv3", "氨氮"); + getChartsZf4("echartDiv4", "热岛减率"); }); const getChartsZfl = (id, text) => { var dom = document.getElementById(id); console.log(dom); var op = { + color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"], title: { text: text, }, tooltip: { - trigger: 'axis' - }, - legend: { - data: ['Rainfall', 'Evaporation'] - }, - toolbox: { - show: true, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, - calculable: true, - xAxis: [ - { - type: 'category', - // prettier-ignore - data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'Rainfall', - type: 'bar', - data: [ - 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 - ], - markPoint: { - data: [ - { type: 'max', name: 'Max' }, - { type: 'min', name: 'Min' } - ] - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - }, - { - name: 'Evaporation', - type: 'bar', - data: [ - 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 - ], - markPoint: { - data: [ - { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, - { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 } - ] - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - } - ] - }; - getEchart(dom, op) - } - const getChartsZf2 = (id, text) => { - var dom = document.getElementById(id); - console.log(dom); - var op = { - title: { - text: text, - }, - xAxis: { - type: 'category', - boundaryGap: false - }, - yAxis: { - type: 'value', - boundaryGap: [0, '30%'] - }, - visualMap: { - type: 'piecewise', - show: false, - dimension: 0, - seriesIndex: 0, - pieces: [ - { - gt: 1, - lt: 3, - color: 'rgba(0, 0, 180, 0.4)' - }, - { - gt: 5, - lt: 7, - color: 'rgba(0, 0, 180, 0.4)' - } - ] - }, - series: [ - { - type: 'line', - smooth: 0.6, - symbol: 'none', - lineStyle: { - color: '#5470C6', - width: 5 - }, - markLine: { - symbol: ['none', 'none'], - label: { show: false }, - data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }] - }, - areaStyle: {}, - data: [ - ['2019-10-10', 200], - ['2019-10-11', 560], - ['2019-10-12', 750], - ['2019-10-13', 580], - ['2019-10-14', 250], - ['2019-10-15', 300], - ['2019-10-16', 450], - ['2019-10-17', 300], - ['2019-10-18', 100] - ] - } - ] - }; - getEchart(dom, op) - } - const getChartsZf3 = (id, text) => { - var dom = document.getElementById(id); - console.log(dom); - var op = { - title: { - text: text, - }, - tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow' - } - }, - legend: {}, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'Direct', - type: 'bar', - emphasis: { - focus: 'series' - }, - data: [320, 332, 301, 334, 390, 330, 320] - }, - { - name: 'Email', - type: 'bar', - stack: 'Ad', - emphasis: { - focus: 'series' - }, - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: 'Union Ads', - type: 'bar', - stack: 'Ad', - emphasis: { - focus: 'series' - }, - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: 'Video Ads', - type: 'bar', - stack: 'Ad', - emphasis: { - focus: 'series' - }, - data: [150, 232, 201, 154, 190, 330, 410] - }, - { - name: 'Search Engine', - type: 'bar', - data: [862, 1018, 964, 1026, 1679, 1600, 1570], - emphasis: { - focus: 'series' - }, - markLine: { - lineStyle: { - type: 'dashed' - }, - data: [[{ type: 'min' }, { type: 'max' }]] - } - }, - { - name: 'Baidu', - type: 'bar', - barWidth: 5, - stack: 'Search Engine', - emphasis: { - focus: 'series' - }, - data: [620, 732, 701, 734, 1090, 1130, 1120] - }, - { - name: 'Google', - type: 'bar', - stack: 'Search Engine', - emphasis: { - focus: 'series' - }, - data: [120, 132, 101, 134, 290, 230, 220] - }, - { - name: 'Bing', - type: 'bar', - stack: 'Search Engine', - emphasis: { - focus: 'series' - }, - data: [60, 72, 71, 74, 190, 130, 110] - }, - { - name: 'Others', - type: 'bar', - stack: 'Search Engine', - emphasis: { - focus: 'series' - }, - data: [62, 82, 91, 84, 109, 110, 120] - } - ] - }; - getEchart(dom, op) - } - const getChartsZf4 = (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', + 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", @@ -344,235 +80,492 @@ 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) - } - const getChartsZf5 = (id, text) => { + getEchart(dom, op); + }; + const getChartsZf2 = (id, text) => { var dom = document.getElementById(id); console.log(dom); - // prettier-ignore - let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; - // prettier-ignore - let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; - let yMax = 500; - let dataShadow = []; - for (let i = 0; i < data.length; i++) { - dataShadow.push(yMax); - } var op = { title: { - text + text: text, }, - xAxis: { - data: dataAxis, - axisLabel: { - inside: true, - color: '#fff' + color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", }, - axisTick: { - show: false - }, - axisLine: { - show: false - }, - z: 10 }, - yAxis: { - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - color: '#999' - } + legend: {}, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, }, - dataZoom: [ + xAxis: [ { - type: 'inside' - } + 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: [ { - type: 'bar', - showBackground: true, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#83bff6' }, - { offset: 0.5, color: '#188df0' }, - { offset: 1, color: '#188df0' } - ]) - }, + name: "系统A", + type: "bar", + stack: "Ad", emphasis: { - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#2378f7' }, - { offset: 0.7, color: '#2378f7' }, - { offset: 1, color: '#83bff6' } - ]) - } + focus: "series", }, - data: data - } - ] + 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: "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, + ], + }, + ], }; - 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: "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 getChartsZf4 = (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 getEchart = (dom, op) => { if (dom) { // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染 // 手动移除该属性 - dom.removeAttribute('_echarts_instance_') + dom.removeAttribute("_echarts_instance_"); var myChart = echarts.init(dom); var option = op; @@ -582,7 +575,7 @@ export default { return { ...toRefs(state), getChartsZfl, - getEchart + getEchart, }; }, }; diff --git a/src/components/Zhibiao2.vue b/src/components/Zhibiao2.vue index 4228d7c..8daad4c 100644 --- a/src/components/Zhibiao2.vue +++ b/src/components/Zhibiao2.vue @@ -4,7 +4,6 @@
-
@@ -25,41 +24,40 @@ export default { }); onMounted(async () => { - getChartsZfl("echartDiv1", '蒸腾量'); - getChartsZfl("echartDiv2", 'COD'); - getChartsZfl("echartDiv3", '氨氮'); - getChartsZfl("echartDiv4", 'SS'); - getChartsZfl("echartDiv5", '屋面温度'); + getChartsZfl("echartDiv1", '渗透量'); + getChartsZf2("echartDiv2", 'COD'); + getChartsZf3("echartDiv3", '氨氮'); + getChartsZf4("echartDiv4", 'SS'); }); const getChartsZfl = (id, text) => { var dom = document.getElementById(id); console.log(dom); var op = { - color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], + color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"], 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", @@ -86,158 +84,549 @@ 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 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", + 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: "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, + ], + }, + ], + }; + getEchart(dom, op); + }; + const getChartsZf3 = (id, text) => { + var dom = document.getElementById(id); + console.log(dom); + var op = { + color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FFBF00", "#FF0087"], + 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: "#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.5, + color: "#37A2FF" + }, + 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: "#FFBF00" + }, + 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: "#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); + }; + 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", + 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 getEchart = (dom, op) => { if (dom) { // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染 diff --git a/src/components/Zhibiao3.vue b/src/components/Zhibiao3.vue index 4228d7c..03cf553 100644 --- a/src/components/Zhibiao3.vue +++ b/src/components/Zhibiao3.vue @@ -3,8 +3,6 @@
-
-
@@ -25,11 +23,9 @@ export default { }); onMounted(async () => { - getChartsZfl("echartDiv1", '蒸腾量'); - getChartsZfl("echartDiv2", 'COD'); - getChartsZfl("echartDiv3", '氨氮'); - getChartsZfl("echartDiv4", 'SS'); - getChartsZfl("echartDiv5", '屋面温度'); + getChartsZfl("echartDiv1", '渗透量'); + getChartsZfl("echartDiv2", '透水铺砖表面温度'); + getChartsZfl("echartDiv3", '热岛消减率'); }); const getChartsZfl = (id, text) => { var dom = document.getElementById(id); @@ -269,7 +265,7 @@ export default { .echartDiv100 { width: 100%; - height: 20%; + height: 30%; margin: 0 auto; } }