123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266 |
- <template>
- <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%;margin-top:20px;"></div>
- </div>
- </template>
- <script>
- var echarts = require("echarts");
- export default {
- data() {
- return {
- dataX:[],
- energyY:[],
- indoorY:[],
- strategy1:[],
- strategy2:[],
- strategy3:[]
- };
- },
- props: ["energyDataList"],
- mounted() {
- this.getDrawData()
-
- },
- methods: {
- getDrawData(){
- this.energyDataList.forEach(el=>{
- el.time = el.date.slice(4,6)+":"+el.date.slice(6,8)
- this.dataX.push(el.time)
- this.indoorY.push(el.tindoorFillRate?el.tindoorFillRate.toFixed(2):0)
- this.energyY.push(el.energySavingRate?el.energySavingRate.toFixed(2):0)
- if(el.chillerExecuteRateReal >= 75){
- this.strategy1.push(1)
- }else{
- this.strategy1.push(null)
- }
- if(el.chillerExecuteRate >= 75){
- this.strategy2.push(1)
- }else{
- this.strategy2.push(null)
- }
- if(el.chillerExecuteRateReal < 75 || el.chillerExecuteRate < 75){
- this.strategy3.push(1)
- }else{
- this.strategy3.push(null)
- }
- })
- this.drawIt();
- },
- drawIt() {
- let myCharts = echarts.init(document.getElementById("pCharts2"));
- var colors = ["#34C724", "#8D9399", "#F54E45", "#00D6B9", "#0091FF"];
- var option = {
- color: colors,
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "cross"
- }
- },
- grid: {
- right: "5%",
- left: "5%"
- },
- xAxis: [
- {
- type: "category",
- axisTick: {
- alignWithLabel: true
- },
- splitLine: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: "#8D9399"
- }
- },
- axisLabel: {
- interval: 0 //代表显示所有x轴标签显示
- },
- data: this.dataX,
- }
- ],
- yAxis: [
- {
- type: "value",
- name: "节能率",
- axisLine: {
- lineStyle: {
- color: "#8D9399"
- }
- },
- splitLine: {
- show: false
- },
- min: 0,
- max: 25,
- position: "right",
- axisLabel: {
- formatter: "{value} ml"
- }
- },
- {
- type: "value",
- show: false,
- name: "",
- min: 0,
- max: 1,
- position: "right",
- offset: 80,
- axisLine: {
- show: false
- },
- axisLabel: {
- formatter: function() {
- return "";
- }
- }
- },
- {
- type: "value",
- name: "室内温度满足率",
- axisLine: {
- lineStyle: {
- color: "#8D9399"
- }
- },
- splitLine: {
- show: false
- },
- min: 0,
- max: 25,
- position: "left",
- axisLabel: {
- formatter: "{value} °C"
- }
- }
- ],
- series: [
- {
- name: "按照策略执行",
- type: "bar",
- barWidth: 30,
- data: this.strategy1
- },
- {
- name: "未按照策略执行",
- type: "bar",
- barWidth: 30,
- data: this.strategy2
- },
- {
- name: "未按照策略执行,申诉通过",
- type: "bar",
- barWidth: 30,
- data: this.strategy3
- },
- {
- name: "室内温度满足率",
- type: "line",
- yAxisIndex: 2,
- data: this.indoorY
- },
- {
- name: "节能率",
- type: "line",
- yAxisIndex: 2,
- data: this.energyY
- }
- ]
- };
- myCharts.setOption(option);
- myCharts.on("click", param => {
- this.$router.push("/evaluate/evTwoLevelMenu");
- if (param.seriesName == "室内温度满足率") {
- this.$router.push({
- path: "/evaluate/evTwoLevelMenu",
- query: { type: 1 }
- });
- } else if (param.seriesName == "节能率") {
- this.$router.push({
- path: "/evaluate/evTwoLevelMenu",
- query: { type: 2 }
- });
- } else {
- this.$router.push({
- path: "/evaluate/evTwoLevelMenu",
- query: { type: 3 }
- });
- }
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .p-echarts {
- width: 100%;
- height: 100%;
- #pCharts2 {
- width: 100%;
- height: 100%;
- }
- .pLegend {
- font-size: 12px;
- color: #000000;
- text-align: center;
- margin-top: 20px;
- .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>
|