|
@@ -1,37 +1,91 @@
|
|
|
<template>
|
|
|
- <div ref="distion" style="width: 100%; height: calc(100% - 0.7rem)"></div>
|
|
|
+ <div ref="eleShareChart" :style="{ height: height, width: width }"></div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
-
|
|
|
+import api from "../../../../api/Overview/index";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
export default {
|
|
|
- props: {},
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: "100%",
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "calc(100% - 0.7rem)",
|
|
|
+ },
|
|
|
+ select_value: Object,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initChart();
|
|
|
- });
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
|
|
|
beforeUnmount() {
|
|
|
window.removeEventListener("resize", this.chart);
|
|
|
},
|
|
|
-
|
|
|
+ watch: {
|
|
|
+ /**
|
|
|
+ * @监听vuex存储值变化 用于调用api
|
|
|
+ */
|
|
|
+ "$store.state.siteId": {
|
|
|
+ immediate: true, // 首次加载的时候执行函数
|
|
|
+ deep: true, // 深入观察,监听数组值,对象属性值的变化
|
|
|
+ handler: function () {
|
|
|
+ this.timeShare();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ select_value() {
|
|
|
+ this.timeShare();
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ timeShare() {
|
|
|
+ var date_;
|
|
|
+ this.select_value == 1 ? (date_ = 0) : (date_ = 1);
|
|
|
+ api
|
|
|
+ .timeShare({
|
|
|
+ siteId: this.$store.state.siteId,
|
|
|
+ type: date_,
|
|
|
+ })
|
|
|
+ .then((requset) => {
|
|
|
+ if (requset.status === "SUCCESS") {
|
|
|
+ this.initChart(requset.data);
|
|
|
+ } else {
|
|
|
+ ElMessage.success({
|
|
|
+ message: requset.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
//次数分布折线图
|
|
|
- initChart() {
|
|
|
- var chart = echarts.init(this.$refs.distion);
|
|
|
+ initChart(data) {
|
|
|
+ var chart = echarts.init(this.$refs.eleShareChart);
|
|
|
var option;
|
|
|
+ var data_all = [
|
|
|
+ {
|
|
|
+ value: data.flat,
|
|
|
+ name: "平",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: data.peak,
|
|
|
+ name: "峰",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: data.need,
|
|
|
+ name: "尖",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ value: data.grain,
|
|
|
+ name: "谷",
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
option = {
|
|
|
- color: [
|
|
|
- "#4BF7F9",
|
|
|
- "#35B9FD",
|
|
|
- "#FE7038",
|
|
|
- "#F7F94B",
|
|
|
- ],
|
|
|
+ color: ["#4BF7F9", "#35B9FD", "#FE7038", "#F7F94B"],
|
|
|
grid: {
|
|
|
left: -100,
|
|
|
top: 50,
|
|
@@ -43,7 +97,7 @@ export default {
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
polar: {},
|
|
|
angleAxis: {
|
|
|
interval: 0,
|
|
@@ -52,7 +106,6 @@ export default {
|
|
|
z: 10,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
-
|
|
|
},
|
|
|
},
|
|
|
radiusAxis: {
|
|
@@ -121,7 +174,7 @@ export default {
|
|
|
formatter: "{b} : {c} kWh",
|
|
|
textStyle: {
|
|
|
fontSize: 12,
|
|
|
- color:'#fff'
|
|
|
+ color: "#fff",
|
|
|
},
|
|
|
position: "outside",
|
|
|
},
|
|
@@ -129,30 +182,12 @@ export default {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 2125.992,
|
|
|
- name: "平",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 918.662,
|
|
|
- name: "峰",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 200.56,
|
|
|
- name: "尖",
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- value: 704.033,
|
|
|
- name: "谷",
|
|
|
- },
|
|
|
- ],
|
|
|
+
|
|
|
+ data: data_all,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
- chart.setOption(option);
|
|
|
+ chart.setOption(option, true);
|
|
|
window.addEventListener("resize", () => {
|
|
|
chart.resize();
|
|
|
});
|