123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425 |
- <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 {};
- },
- props: ["energyDataList"],
- mounted() {
- this.drawIt();
- },
- methods: {
- 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: [
- "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: "节能率",
- 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: [
- 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: "未按照策略执行",
- type: "bar",
- 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: "未按照策略执行,申诉通过",
- type: "bar",
- 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: "室内温度满足率",
- type: "line",
- yAxisIndex: 2,
- data: [
- 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,
- 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: "节能率",
- type: "line",
- yAxisIndex: 2,
- data: [
- 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,
- 23.0,
- 16.5,
- 12.0,
- 6.2,
- 14.0,
- 2.2,
- 3.0,
- 4.5,
- 6.3,
- 10.2,
- 20.3,
- 23.4
- ]
- }
- ]
- };
- 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>
|