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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| <template>
| <div id="rose-chart">
| <div class="rose-chart-title">月销售额占比 - 总金额：{{ (sum/10000).toFixed(2) }} 万元</div>
| <dv-charts :option="option" />
| </div>
| </template>
|
| <script>
| import axios from 'axios'
|
| export default {
| name: 'RoseChart',
| data() {
| return {
| option: {},
| sum: 1000
| }
| },
| methods: {
| httpData() {
| const getApiData = async () => {
| return await axios.get(this.baseUrl + "data3", { params: {} })
| }
| getApiData().then(result => {
| let list = result.data.data;
| let sum = 0;
| for (let i = 0; i < list.length; i++) {
| let item = list[i];
| sum += item.sum;
| item['name'] = item.month + "月";
| item['value'] = Number(item.sum.toFixed(2));
| delete item.month;
| delete item.sum;
| }
| this.option = {
| series: [
| {
| type: 'pie',
| radius: '50%',
| roseSort: false,
| data: list,
| insideLabel: {
| show: false
| },
| outsideLabel: {
| formatter: '{name} {percent}%',
| labelLineEndLength: 20,
| style: {
| fill: '#fff'
| },
| labelLineStyle: {
| stroke: '#fff'
| }
| },
| roseType: true
| }
| ],
| color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
| }
| this.sum = sum;
| })
| }
| },
| mounted() {
| const { httpData } = this
| httpData()
|
| setInterval(httpData, 30000)
| }
| }
| </script>
|
| <style lang="less">
| #rose-chart {
| width: 30%;
| height: 100%;
| background-color: rgba(6, 30, 93, 0.5);
| border-top: 2px solid rgba(1, 153, 209, .5);
| box-sizing: border-box;
|
| .rose-chart-title {
| height: 50px;
| font-weight: bold;
| text-indent: 20px;
| font-size: 20px;
| display: flex;
| align-items: center;
| }
|
| .dv-charts-container {
| height: calc(~"100% - 50px");
| }
| }
| </style>
|
|
