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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <template>
| <div class="echarts-box" id="rainLevelPieChart"></div>
| </template>
|
| <script>
| export default {
|
| data () {
| return {
| myChart: null,
| }
| },
| mounted () {
|
| },
| destroyed () {
| },
| methods: {
| createPieChart (jydjdataPie) {
| let data = jydjdataPie
| let total = data.reduce((prev, curr) => prev + curr.value, 0)
| if (!this.myChart) {
| this.myChart = this.$echarts.init(
| document.getElementById('rainLevelPieChart')
| )
| }
| let option = {
| legend: {
| orient: "vertical",
| left: "50%",
| top: 15,
| width: "100%",
| itemGap: 10,
| itemWidth: 8,
| itemHeight: 8,
| formatter: function (name) {
| let value = 0
| data.forEach((item) => {
| if (item.name == name) {
| value = item.value
| }
| })
| return `${name} ${value}个 ${((value * 100) / total).toFixed(
| 2
| )}%`
| },
| textStyle: {
| color: "#fff",
| fontSize: 16,
| fontFamily: "Roboto-Bold",
| },
| },
| radar: [
| {
| indicator: [
| { text: "Indicator1" },
| { text: "Indicator2" },
| { text: "Indicator3" },
| { text: "Indicator4" },
| { text: "Indicator5" },
| ],
| center: ["25%", "50%"],
| radius: "80%",
| startAngle: 90,
| splitNumber: 1,
| shape: "circle",
| axisName: {
| show: false,
| },
| splitArea: {
| areaStyle: {
| color: ["rgba(0, 0, 0, 0.2)"],
| },
| },
| axisLine: {
| lineStyle: {
| color: "rgba(211, 253, 250, 0)",
| },
| },
| splitLine: {
| lineStyle: {
| color: "rgba(51, 114, 210, .5)",
| },
| },
| },
| ],
| color: [
| "#831A08",
| "#FF08D5",
| "#0002CD",
| "#5093F1",
| "#3DB72F",
| "#9FEFA1",
| "#FFFFFF",
| ],
| series: [
| {
| name: "降雨等级",
| type: "pie",
| radius: ["50%", "65%"],
| center: ["25%", "50%"],
| label: {
| show: true,
| position: "center",
| color: "#D4E8F8",
| fontSize: 34,
| fontFamily: "Roboto-Bold",
| formatter: () => {
| return total
| },
| },
| labelLine: {
| show: false,
| },
| itemStyle: {
| borderRadius: 0,
| },
| data,
| },
| ],
| }
| this.myChart.setOption(option)
| },
| },
| }
| </script>
|
| <style lang="scss" scoped>
| .echarts-box {
| width: 100%;
| height: 210px;
| }
| </style>
|
|
