From 9f16b5c553b479ea12fe368a7ecc748872ea8b98 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 12 六月 2025 11:11:27 +0800 Subject: [PATCH] 修改配置文件 --- web_src/src/components/console/ConsoleNet.vue | 74 ++++++++++++++++++++++++++++++------- 1 files changed, 60 insertions(+), 14 deletions(-) diff --git a/web_src/src/components/console/ConsoleNet.vue b/web_src/src/components/console/ConsoleNet.vue old mode 100644 new mode 100755 index a6d7111..6266f35 --- a/web_src/src/components/console/ConsoleNet.vue +++ b/web_src/src/components/console/ConsoleNet.vue @@ -1,6 +1,6 @@ <template> <div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center"> - <ve-line :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line> + <ve-line ref="ConsoleNet" :data="chartData" :extend="extend" :settings="chartSettings" :events="chartEvents" width="100%" height="100%" ></ve-line> </div> </template> @@ -14,7 +14,7 @@ data() { return { chartData: { - columns: ['time', 'in', 'out'], + columns: ['time','out','in'], rows: [] }, chartSettings: { @@ -48,36 +48,82 @@ showMaxLabel: true, }, }, + yAxis: { + type: 'value', + min: 0, + max: 1000, + splitNumber: 6, + position: "left", + silent: true, + }, tooltip: { trigger: 'axis', formatter: (data)=>{ - console.log(parseFloat(data[0].data[1]).toFixed(2)) - console.log(parseFloat(data[1].data[1]).toFixed(2)) - console.log("############") - return "涓嬭浇锛�" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 涓婁紶锛�" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps"; + let in_sel = true; + let out_sel = true; + for (let key in this.extend.legend.selected) { + if (key == "涓婁紶") { + out_sel = this.extend.legend.selected[key]; + } + if (key == "涓嬭浇") { + in_sel = this.extend.legend.selected[key]; + } + } + if (out_sel && in_sel) { + return ( + data[1].marker + + "涓嬭浇锛�" + + parseFloat(data[1].data[1]).toFixed(2) + + "Mbps" + + "</br> " + + data[0].marker + + "涓婁紶锛�" + + parseFloat(data[0].data[1]).toFixed(2) + + "Mbps" + ); + } else if (out_sel) + return ( + data[0].marker + + "涓婁紶锛�" + + parseFloat(data[0].data[1]).toFixed(2) + + "Mbps" + ); + else if (in_sel) + return ( + data[0].marker + + "涓嬭浇锛�" + + parseFloat(data[0].data[1]).toFixed(2) + + "Mbps" + ); + return ""; } }, legend: { left: "center", bottom: "15px", + selected: {}, + } + }, + chartEvents: { + legendselectchanged: (item) => { + this.extend.legend.selected = item.selected; } } }; }, mounted() { - // setInterval(()=>{ - // // console.log(111111) - // for (let i = 0; i < this.chartData.rows.length; i++) { - // this.chartData.rows[i].閿�鍞 += 1000; - // } - // },1000) + this.$nextTick(_ => { + setTimeout(()=>{ + this.$refs.ConsoleNet.echarts.resize() + }, 100) + }) }, destroyed() { }, methods: { - setData: function(data) { - console.log(data) + setData: function(data, total) { this.chartData .rows = data; + this.extend.yAxis.max= total; } } -- Gitblit v1.8.0