old mode 100644
new mode 100755
| | |
| | | <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> |
| | | |
| | |
| | | data() { |
| | | return { |
| | | chartData: { |
| | | columns: ['time', 'in', 'out'], |
| | | columns: ['time','out','in'], |
| | | rows: [] |
| | | }, |
| | | chartSettings: { |
| | |
| | | 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; |
| | | } |
| | | |
| | | } |