饼图调整
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