饼图调整
Showing
2 changed files
with
22 additions
and
16 deletions
... | @@ -19,8 +19,8 @@ | ... | @@ -19,8 +19,8 @@ |
19 | }, | 19 | }, |
20 | props: { | 20 | props: { |
21 | cdata: { | 21 | cdata: { |
22 | type: Object, | 22 | type: Array, |
23 | default: () => ({}), | 23 | default: () => ([]), |
24 | }, | 24 | }, |
25 | }, | 25 | }, |
26 | watch: { | 26 | watch: { |
... | @@ -47,6 +47,7 @@ | ... | @@ -47,6 +47,7 @@ |
47 | { | 47 | { |
48 | name: "Access From", | 48 | name: "Access From", |
49 | type: "pie", | 49 | type: "pie", |
50 | radius: '60%', | ||
50 | avoidLabelOverlap: true, | 51 | avoidLabelOverlap: true, |
51 | label: { | 52 | label: { |
52 | formatter: (params) => { | 53 | formatter: (params) => { |
... | @@ -54,10 +55,17 @@ | ... | @@ -54,10 +55,17 @@ |
54 | }, | 55 | }, |
55 | position: "outer", | 56 | position: "outer", |
56 | alignTo: "edge", | 57 | alignTo: "edge", |
57 | margin: 5 | 58 | margin: 10, |
59 | normal: { | ||
60 | show: true, | ||
61 | textStyle: { | ||
62 | fontSize: 12 | ||
63 | } | ||
64 | }, | ||
58 | }, | 65 | }, |
59 | 66 | ||
60 | data: newData.seriesData, | 67 | |
68 | data: newData, | ||
61 | } | 69 | } |
62 | ], | 70 | ], |
63 | }; | 71 | }; | ... | ... |
... | @@ -10,9 +10,7 @@ | ... | @@ -10,9 +10,7 @@ |
10 | export default { | 10 | export default { |
11 | data () { | 11 | data () { |
12 | return { | 12 | return { |
13 | cdata: { | 13 | cdata: [], |
14 | seriesData: [], | ||
15 | }, | ||
16 | getdata: [], | 14 | getdata: [], |
17 | }; | 15 | }; |
18 | }, | 16 | }, |
... | @@ -22,44 +20,44 @@ | ... | @@ -22,44 +20,44 @@ |
22 | mounted () { | 20 | mounted () { |
23 | this.addhousetotal(); | 21 | this.addhousetotal(); |
24 | window.addEventListener("resize", () => { | 22 | window.addEventListener("resize", () => { |
25 | this.getdata = []; | 23 | this.cdata = []; |
26 | this.addhousetotal(); | 24 | this.addhousetotal(); |
27 | }); | 25 | }); |
28 | 26 | ||
29 | }, | 27 | }, |
30 | methods: { | 28 | methods: { |
31 | async addhousetotal () { | 29 | async addhousetotal () { |
32 | if (this.getdata.length == 0) { | 30 | if (this.cdata == 0) { |
33 | this.getdata = []; | 31 | this.getdata = []; |
34 | try { | 32 | try { |
35 | let { result: res } = await work.addhousetotal(); | 33 | let { result: res } = await work.addhousetotal(); |
36 | res.map((item) => { | 34 | res.map((item) => { |
37 | return this.cdata.seriesData.push({ | 35 | return this.cdata.push({ |
38 | name: `${item.fwyt + '(' + item.fwxz})`, | 36 | name: `${item.fwyt + '(' + item.fwxz})`, |
39 | value: item.mj, | 37 | value: item.mj, |
40 | }); | 38 | }); |
41 | 39 | ||
42 | }); | 40 | }); |
43 | 41 | let delarr = this.cdata.sort(this.up) | |
42 | this.setadat(delarr) | ||
44 | 43 | ||
45 | } catch (error) { | 44 | } catch (error) { |
46 | console.log("error", error); | 45 | console.log("error", error); |
47 | } | 46 | } |
48 | } | 47 | } |
49 | let delarr = this.cdata.seriesData.sort(this.up) | 48 | |
50 | this.setadat(delarr) | ||
51 | 49 | ||
52 | }, | 50 | }, |
53 | // 处理数据方法 | 51 | // 处理数据方法 |
54 | setadat (delarr) { | 52 | setadat (delarr) { |
55 | 53 | ||
56 | this.cdata.seriesData = delarr.splice(0, 6); | 54 | this.cdata = delarr.splice(0, 6); |
57 | let sum = 0 | 55 | let sum = 0 |
58 | for (var i = 0; i < delarr.length; i++) { | 56 | for (var i = 0; i < delarr.length; i++) { |
59 | sum = sum + delarr[i].value | 57 | sum = sum + delarr[i].value |
60 | } | 58 | } |
61 | sum = sum.toFixed(2) | 59 | sum = sum.toFixed(2) |
62 | this.cdata.seriesData.push({ | 60 | this.cdata.push({ |
63 | name: "其他(其他种类)", | 61 | name: "其他(其他种类)", |
64 | values: "其他种类", | 62 | values: "其他种类", |
65 | value: sum, | 63 | value: sum, | ... | ... |
-
Please register or sign in to post a comment