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
| <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]);
| },
| },
|
| mounted() {},
| };
| </script>
|
| <style scoped>
| .pie-list {
| height: 100%;
| display: flex;
| }
| .pie {
| flex: 1;
| }
| </style>
|
|
