|
|
@@ -1,7 +1,10 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div @click="openSteamBalance">
|
|
|
<div id="bottomRightChart" style="width:100%;height:3.5rem;top: -20px"></div>
|
|
|
</div>
|
|
|
+ <el-dialog class="my-info-dialog" :visible.sync="openChart" title="BYC用电情况" @open="open" width="1600px" destroy-on-close append-to-body>
|
|
|
+ <div id="BYCChart1" style="width:100%;height:600px;"></div>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -11,7 +14,8 @@ export default {
|
|
|
props:['weekData'],
|
|
|
data() {
|
|
|
return {
|
|
|
- chart: null
|
|
|
+ chart: null,
|
|
|
+ openChart: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -25,6 +29,12 @@ export default {
|
|
|
this.draw();
|
|
|
}, 6000);
|
|
|
},
|
|
|
+ openSteamBalance(){},
|
|
|
+ open(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initBycChartDialog()
|
|
|
+ })
|
|
|
+ },
|
|
|
draw() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
this.chart = this.echarts.init(document.getElementById("bottomRightChart"));
|
|
|
@@ -308,6 +318,100 @@ export default {
|
|
|
};
|
|
|
|
|
|
this.chart.setOption(option);
|
|
|
+ },
|
|
|
+ drawDialog() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ this.chart1 = this.echarts.init(document.getElementById("bottomRightChart"));
|
|
|
+ // ----------------------------------------------------------------
|
|
|
+ // 数据
|
|
|
+ let dateBase = new Date();
|
|
|
+ let year = dateBase.getFullYear();
|
|
|
+ let dottedBase = +dateBase + 1000 * 3600 * 24;
|
|
|
+ let weekCategory = [];
|
|
|
+
|
|
|
+ let maxData = 12000;
|
|
|
+ let weekMaxData = [];
|
|
|
+ let weekLineData = [];
|
|
|
+
|
|
|
+ // 周数据
|
|
|
+ for (let i = 0; i < 7; i++) {
|
|
|
+ // 日期
|
|
|
+ var date = new Date((dottedBase -= 1000 * 3600 * 24));
|
|
|
+ weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
|
|
|
+
|
|
|
+ // 折线图数据
|
|
|
+ weekMaxData.push(maxData);
|
|
|
+ var distance = Math.round(Math.random() * 11000 + 500);
|
|
|
+ weekLineData.push(distance);
|
|
|
+ };
|
|
|
+ const dateNum = [];
|
|
|
+ for (let i = 0; i < this.weekData.length; i++) {
|
|
|
+ dateNum[i] = this.weekData[i].evconsume;
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 90,
|
|
|
+ right: 80,
|
|
|
+ bottom: 40,
|
|
|
+ top: "30%"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ position: "bottom",
|
|
|
+ axisLine: true,
|
|
|
+ axisLabel: {
|
|
|
+ color: "rgba(255,255,255,.8)",
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00' ]
|
|
|
+ // data: weekCategory
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [99, 180, 200, 310, 459, 601, 800 ,933],
|
|
|
+ // data:dateNum,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 15,
|
|
|
+ color:"#28f8de",
|
|
|
+ lineStyle: {
|
|
|
+ width: 6
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ type: "average",
|
|
|
+ name: "额定值",
|
|
|
+ yAxis: 900
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ precision: 0,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: "额定值: \n {c}"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 3,
|
|
|
+ color: "rgba(248,211,81,.7)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ this.chart1.setOption(option);
|
|
|
}
|
|
|
},
|
|
|
destroyed() {
|
