1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <template>
| <div class="pie-list">
| <pie-chart
| ref="pie0"
| class="pie"
| color="#faa93e"
| markColor="#7b2632"
| :sum="sum"
| name="电源告警"
| ></pie-chart>
| <pie-chart
| ref="pie1"
| class="pie"
| color="#6d98dc"
| markColor="#222d8b"
| :sum="sum"
| name="设备告警"
| ></pie-chart>
| <pie-chart
| ref="pie2"
| class="pie"
| color="#f78db3"
| markColor="#a7476d"
| :sum="sum"
| name="电池告警"
| ></pie-chart>
| </div>
| </template>
|
| <script>
| import pieChart from "./pieChart2";
| export default {
| name: "",
| props: {
| values: {
| type: Array,
| default() {
| return [0, 0, 0];
| },
| },
| },
| data() {
| return {};
| },
| computed: {
| sum() {
| return this.values.reduce((a, b) => a + b, 0) || 1;
| },
| },
| components: {
| pieChart,
| },
| methods: {
| update() {
| let values = this.values;
| this.$refs.pie0.setData(values[0]);
| this.$refs.pie1.setData(values[1]);
| this.$refs.pie2.setData(values[2]);
| },
| resize() {
| this.$refs.pie0.resize();
| this.$refs.pie1.resize();
| this.$refs.pie2.resize();
| },
| },
|
| mounted() {},
| };
| </script>
|
| <style scoped>
| .pie-list {
| height: 100%;
| display: flex;
| }
| .pie {
| flex: 1;
| }
| </style>
|
|
