|
@@ -1,5 +1,14 @@
|
|
|
<template>
|
|
|
- <div id="pCharts2"></div>
|
|
|
+ <div class="p-echarts">
|
|
|
+ <div class="pLegend">
|
|
|
+ <i class="icon1"></i>按照策略执行
|
|
|
+ <i class="icon2"></i>未按照策略执行
|
|
|
+ <i class="icon3"></i>未按照策略执行,申诉通过
|
|
|
+ <i class="icon4"></i>室内温度满足率
|
|
|
+ <i class="icon5"></i>节能率
|
|
|
+ </div>
|
|
|
+ <div id="pCharts2" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -15,232 +24,8 @@ export default {
|
|
|
methods: {
|
|
|
drawIt() {
|
|
|
let myCharts = echarts.init(document.getElementById("pCharts2"));
|
|
|
- var colors = ["#5793f3", "#d14a61", "#675bba"];
|
|
|
+ var colors = ["#34C724", "#8D9399", "#F54E45",'#00D6B9','#0091FF'];
|
|
|
var option = {
|
|
|
- // title: {
|
|
|
- // text: "",
|
|
|
- // x: "center",
|
|
|
- // y: "top"
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // data: ["室内温度满足率", "节能率", "策略执行"],
|
|
|
- // y: "26"
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // trigger: "axis",
|
|
|
- // textStyle: {
|
|
|
- // align: "left"
|
|
|
- // }
|
|
|
- // },
|
|
|
- // grid: {
|
|
|
- // top: "22%",
|
|
|
- // left: "1%",
|
|
|
- // right: "1%",
|
|
|
- // bottom: "10%",
|
|
|
- // containLabel: true
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // type: "category",
|
|
|
- // data: [
|
|
|
- // `${this.date}.1`,
|
|
|
- // `${this.date}.2`,
|
|
|
- // `${this.date}.3`,
|
|
|
- // `${this.date}.4`,
|
|
|
- // `${this.date}.5`,
|
|
|
- // `${this.date}.6`,
|
|
|
- // `${this.date}.7`,
|
|
|
- // `${this.date}.8`,
|
|
|
- // `${this.date}.9`,
|
|
|
- // `${this.date}.10`,
|
|
|
- // `${this.date}.11`,
|
|
|
- // `${this.date}.12`,
|
|
|
- // `${this.date}.13`,
|
|
|
- // `${this.date}.14`,
|
|
|
- // `${this.date}.15`,
|
|
|
- // `${this.date}.16`,
|
|
|
- // `${this.date}.17`,
|
|
|
- // `${this.date}.18`,
|
|
|
- // `${this.date}.19`,
|
|
|
- // `${this.date}.20`,
|
|
|
- // `${this.date}.21`,
|
|
|
- // `${this.date}.22`,
|
|
|
- // `${this.date}.23`,
|
|
|
- // `${this.date}.24`,
|
|
|
- // `${this.date}.25`,
|
|
|
- // `${this.date}.26`,
|
|
|
- // `${this.date}.27`,
|
|
|
- // `${this.date}.28`,
|
|
|
- // `${this.date}.29`,
|
|
|
- // `${this.date}.30`,
|
|
|
- // `${this.date}.31`
|
|
|
- // ]
|
|
|
- // },
|
|
|
- // yAxis: [
|
|
|
- // {
|
|
|
- // name: "室内温度满足率",
|
|
|
- // type: "value",
|
|
|
- // max: 100,
|
|
|
- // splitLine: {
|
|
|
- // show: false
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "节能率",
|
|
|
- // nameLocation: "start",
|
|
|
- // max: 50,
|
|
|
- // type: "value",
|
|
|
- // splitLine: {
|
|
|
- // show: false
|
|
|
- // }
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: "室内温度满足率",
|
|
|
- // type: "line",
|
|
|
- // data: [
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90,
|
|
|
- // 85,
|
|
|
- // 80,
|
|
|
- // 85,
|
|
|
- // 90
|
|
|
- // ],
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // position: "top",
|
|
|
- // textStyle: {
|
|
|
- // color: "#B42E29"
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "节能率",
|
|
|
- // type: "line",
|
|
|
- // data: [
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88,
|
|
|
- // 76,
|
|
|
- // 50,
|
|
|
- // 77,
|
|
|
- // 88
|
|
|
- // ],
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // position: "bottom",
|
|
|
- // textStyle: {
|
|
|
- // color: "#2D3E4C"
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "策略执行",
|
|
|
- // type: "line",
|
|
|
- // yAxisIndex: 1,
|
|
|
- // data: [
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3,
|
|
|
- // 2,
|
|
|
- // 5,
|
|
|
- // 3,
|
|
|
- // 3
|
|
|
- // ],
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // position: "top",
|
|
|
- // textStyle: {
|
|
|
- // color: "#5F97A0"
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // ]
|
|
|
color: colors,
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
@@ -251,40 +36,69 @@ export default {
|
|
|
grid: {
|
|
|
right: "20%"
|
|
|
},
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- // dataView: { show: true, readOnly: false },
|
|
|
- // restore: { show: true },
|
|
|
- // saveAsImage: { show: true }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
+ splitLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ lineStyle:{
|
|
|
+ color:'#8D9399',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval:0,//代表显示所有x轴标签显示
|
|
|
+ },
|
|
|
data: [
|
|
|
- "1月",
|
|
|
- "2月",
|
|
|
- "3月",
|
|
|
- "4月",
|
|
|
- "5月",
|
|
|
- "6月",
|
|
|
- "7月",
|
|
|
- "8月",
|
|
|
- "9月",
|
|
|
- "10月",
|
|
|
- "11月",
|
|
|
- "12月"
|
|
|
+ "11.01",
|
|
|
+ "11.02",
|
|
|
+ "11.03",
|
|
|
+ "11.04",
|
|
|
+ "11.05",
|
|
|
+ "11.06",
|
|
|
+ "11.07",
|
|
|
+ "11.08",
|
|
|
+ "11.09",
|
|
|
+ "11.10",
|
|
|
+ "11.12",
|
|
|
+ "11.13",
|
|
|
+ "11.14",
|
|
|
+ '11.15',
|
|
|
+ '11.16',
|
|
|
+ '11.17',
|
|
|
+ '11.18',
|
|
|
+ '11.19',
|
|
|
+ '11.20',
|
|
|
+ '11.21',
|
|
|
+ '11.22',
|
|
|
+ '11.23',
|
|
|
+ '11.24',
|
|
|
+ '11.25',
|
|
|
+ '11.26',
|
|
|
+ '11.27',
|
|
|
+ '11.28',
|
|
|
+ '11.29',
|
|
|
+ '11.30',
|
|
|
+ '11.31'
|
|
|
]
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "蒸发量",
|
|
|
+ name: "节能率",
|
|
|
+ axisLine:{
|
|
|
+ lineStyle:{
|
|
|
+ color:'#8D9399',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
min: 0,
|
|
|
max: 25,
|
|
|
position: "right",
|
|
@@ -294,17 +108,15 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
+ show:false,
|
|
|
name: "",
|
|
|
min: 0,
|
|
|
- max: 25,
|
|
|
+ max: 1,
|
|
|
position: "right",
|
|
|
offset: 80,
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
axisLabel: {
|
|
|
formatter: function() {
|
|
|
return "";
|
|
@@ -313,15 +125,19 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "温度",
|
|
|
+ name: "室内温度满足率",
|
|
|
+ axisLine:{
|
|
|
+ lineStyle:{
|
|
|
+ color:'#8D9399',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
min: 0,
|
|
|
max: 25,
|
|
|
position: "left",
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: colors[2]
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
axisLabel: {
|
|
|
formatter: "{value} °C"
|
|
|
}
|
|
@@ -329,22 +145,25 @@ export default {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: "蒸发量",
|
|
|
+ name: "按照策略执行",
|
|
|
type: "bar",
|
|
|
- data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
+ barWidth : 30,
|
|
|
+ data: [1, null, null, 1, null, null, 1, null, null, 1, null, null,1, null, null, 1, null, null, 1, null, null, 1, null, null,1, null, null,1, null, null,null]
|
|
|
},
|
|
|
{
|
|
|
- name: "降水量",
|
|
|
+ name: "未按照策略执行",
|
|
|
type: "bar",
|
|
|
- data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
+ barWidth : 30,
|
|
|
+ data: [null,1, 1, null,1, null, null,1, null, null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null]
|
|
|
},
|
|
|
{
|
|
|
- name: "降雨量",
|
|
|
+ name: "未按照策略执行,申诉通过",
|
|
|
type: "bar",
|
|
|
- data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
|
|
|
+ barWidth : 30,
|
|
|
+ data: [null, null, null, null, null, 1, null, null, 1, null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,1]
|
|
|
},
|
|
|
{
|
|
|
- name: "平均温度",
|
|
|
+ name: "室内温度满足率",
|
|
|
type: "line",
|
|
|
yAxisIndex: 2,
|
|
|
data: [
|
|
@@ -359,11 +178,30 @@ export default {
|
|
|
23.0,
|
|
|
16.5,
|
|
|
12.0,
|
|
|
- 6.2
|
|
|
+ 6.2,
|
|
|
+ 2.0,
|
|
|
+ 2.2,
|
|
|
+ 3.3,
|
|
|
+ 4.5,
|
|
|
+ 6.3,
|
|
|
+ 10.2,
|
|
|
+ 20.3,
|
|
|
+ 23.4,
|
|
|
+ 23.0,
|
|
|
+ 16.5,
|
|
|
+ 12.0,
|
|
|
+ 6.2,
|
|
|
+ 2.0,
|
|
|
+ 2.2,
|
|
|
+ 3.3,
|
|
|
+ 4.5,
|
|
|
+ 6.3,
|
|
|
+ 10.2,
|
|
|
+ 20.3
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
- name: "平均co2",
|
|
|
+ name: "节能率",
|
|
|
type: "line",
|
|
|
yAxisIndex: 2,
|
|
|
data: [
|
|
@@ -378,7 +216,26 @@ export default {
|
|
|
16.5,
|
|
|
12.0,
|
|
|
6.2,
|
|
|
- 14.0
|
|
|
+ 14.0,
|
|
|
+ 2.2,
|
|
|
+ 3.0,
|
|
|
+ 4.5,
|
|
|
+ 6.3,
|
|
|
+ 10.2,
|
|
|
+ 20.3,
|
|
|
+ 23.4,
|
|
|
+ 23.0,
|
|
|
+ 16.5,
|
|
|
+ 12.0,
|
|
|
+ 6.2,
|
|
|
+ 14.0,
|
|
|
+ 2.2,
|
|
|
+ 3.0,
|
|
|
+ 4.5,
|
|
|
+ 6.3,
|
|
|
+ 10.2,
|
|
|
+ 20.3,
|
|
|
+ 23.4
|
|
|
]
|
|
|
}
|
|
|
]
|
|
@@ -411,8 +268,63 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-#pCharts2 {
|
|
|
+.p-echarts{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ #pCharts2 {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+.pLegend{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000000;
|
|
|
+ text-align:center;
|
|
|
+ .icon1{
|
|
|
+ display: inline-block;
|
|
|
+ width:12px;
|
|
|
+ height:12px;
|
|
|
+ background:rgba(52,199,36,1);
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .icon2{
|
|
|
+ display: inline-block;
|
|
|
+ width:12px;
|
|
|
+ height:12px;
|
|
|
+ background:#F54E45;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .icon3{
|
|
|
+ display: inline-block;
|
|
|
+ width:12px;
|
|
|
+ height:12px;
|
|
|
+ background:#8D9399;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .icon4{
|
|
|
+ display: inline-block;
|
|
|
+ height:6px;
|
|
|
+ width: 16px;
|
|
|
+ background:rgba(0,145,255,1);
|
|
|
+ border-radius:3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .icon5{
|
|
|
+ display: inline-block;
|
|
|
+ height:6px;
|
|
|
+ width: 16px;
|
|
|
+ background:#00D6B9;
|
|
|
+ border-radius:3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
</style>
|