data() { return { aaa: “”, bbb: “”, charts: “”, ddd: [ [ { name: 早高峰, xAxis: “07:30” }, { xAxis: “10:00” } ], [ { name: “晚高峰”, xAxis: “17:30” }, { xAxis: “21:15” } ] ] }; }, methods: { drawPie(id) { this.charts = echarts.init(document.getElementById(id)); this.charts.setOption({ title: { text: “一天用电量分布”, subtext: “纯属虚构” }, tooltip: { trigger: “axis”, axisPointer: { type: “cross” } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: “category”, boundaryGap: false, data: [ “00:00”, “01:15”, “02:30”, “03:45”, “05:00”, “06:15”, “07:30”, “08:45”, “10:00”, “11:15”, “12:30”, “13:45”, “15:00”, “16:15”, “17:30”, “18:45”, “20:00”, “21:15”, “22:30”, “23:45” ] }, yAxis: { type: “value”, axisLabel: { formatter: “{value} W” }, axisPointer: { snap: true } },
series: [ { name: "用电量", type: "line", smooth: true, data: [ 300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400 ], markArea: { data: [ [ { name: "早高峰", xAxis: "07:30" }, { xAxis: "10:00" } ], [ { name: "晚高峰", xAxis: "17:30" }, { xAxis: "21:15" } ] ] } }, { name: "用水量", type: "line", smooth: true, data: [ 200, 260, 70, 210, 250, 310, 250, 430, 400, 390, 380, 360, 680, 500, 600, 370, 780, 700, 280, 400 ], markArea: { data: [ [ { name: "早高峰", xAxis: "02:30" }, { xAxis: "05:00" } ], [ { name: "晚高峰", xAxis: "12:30" }, { xAxis: "15:00" } ] ] } } ] }); }, eConsole(param) { console.log(param); let _this = this; this.aaa = param.name; this.ddd = [ [ { name: `早高峰`, xAxis: "07:30" }, { xAxis: "10:00" } ], [ { name: "晚高峰", xAxis: "17:30" }, { xAxis: "21:15" } ], [ { name: param.value, xAxis: _this.aaa }, { xAxis: _this.aaa } ] ]; this.charts.on("mouseup", this.bbbb); }, bbbb(param) { console.log(param); let _this = this; this.bbb = param.name; let num = 0; for (let i = 0; i < this.ddd.length; i++) { if (this.aaa === this.ddd[i][0].xAxis) { this.ddd[i][1].xAxis = this.bbb; } } this.charts.setOption({ title: { text: "一天用电量分布", subtext: "纯属虚构" }, tooltip: { trigger: "axis", axisPointer: { type: "cross" } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: "category", boundaryGap: false, data: [ "00:00", "01:15", "02:30", "03:45", "05:00", "06:15", "07:30", "08:45", "10:00", "11:15", "12:30", "13:45", "15:00", "16:15", "17:30", "18:45", "20:00", "21:15", "22:30", "23:45" ] }, yAxis: { type: "value", axisLabel: { formatter: "{value} W" }, axisPointer: { snap: true } }, series: [ { name: "用电量", type: "line", smooth: true, data: [ 300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400 ], markArea: { data: _this.ddd } } ] }); this.charts.off("mousemove", this.cccc); this.charts.setOption({ title: { text: "一天用电量分布", subtext: "纯属虚构" }, tooltip: { trigger: "axis", axisPointer: { type: "cross" } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: "category", boundaryGap: false, data: [ "00:00", "01:15", "02:30", "03:45", "05:00", "06:15", "07:30", "08:45", "10:00", "11:15", "12:30", "13:45", "15:00", "16:15", "17:30", "18:45", "20:00", "21:15", "22:30", "23:45" ] }, yAxis: { type: "value", axisLabel: { formatter: "{value} W" }, axisPointer: { snap: true } }, series: [ { name: "用电量", type: "line", smooth: true, data: [ 300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400 ], markArea: { data: _this.ddd } } ] }); }, cccc(param) { let _this = this; let num = 0; for (let i = 0; i < this.ddd.length; i++) { if (this.aaa === this.ddd[i][0].xAxis) { this.ddd[i][1].xAxis = param.name; } } this.charts.setOption({ title: { text: "一天用电量分布", subtext: "纯属虚构" }, tooltip: { trigger: "axis", axisPointer: { type: "cross" } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: "category", boundaryGap: false, data: [ "00:00", "01:15", "02:30", "03:45", "05:00", "06:15", "07:30", "08:45", "10:00", "11:15", "12:30", "13:45", "15:00", "16:15", "17:30", "18:45", "20:00", "21:15", "22:30", "23:45" ] }, yAxis: { type: "value", axisLabel: { formatter: "{value} W" }, axisPointer: { snap: true } }, series: [ { name: "用电量", type: "line", smooth: true, data: [ 300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400 ], markArea: { data: _this.ddd } } ] }); this.charts.on("mouseup", this.bbbb); }, eClick(param) { console.log(param) debugger if (this.aaa && this.bbb) { this.charts.setOption({ title: { text: "一天用电量分布", subtext: "纯属虚构" }, tooltip: { trigger: "axis", axisPointer: { type: "cross" } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: "category", boundaryGap: false, data: [ "00:00", "01:15", "02:30", "03:45", "05:00", "06:15", "07:30", "08:45", "10:00", "11:15", "12:30", "13:45", "15:00", "16:15", "17:30", "18:45", "20:00", "21:15", "22:30", "23:45" ] }, yAxis: { type: "value", axisLabel: { formatter: "{value} W" }, axisPointer: { snap: true } }, series: [ { name: "用电量", type: "line", smooth: true, data: [ 300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400 ], markArea: { data: [ [ { name: "早高峰", xAxis: "07:30" }, { xAxis: "10:00" } ], [ { name: "晚高峰", xAxis: "17:30" }, { xAxis: "21:15" } ] ] } } ] }); } }}, //调用 mounted() { this.$nextTick(function() { this.drawPie(“main1”); this.charts.on(“mousedown”, this.eConsole); this.charts.on(“click”, this.eClick); }); } };
