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
| const fontSize = 12
|
| // 显示前count个数据标签
| function genData(chartData, count) {
| chartData.forEach((item, index) => {
| const _show = index < count
| item.label = { show: _show }
| item.labelLine = { show: _show }
| })
| return chartData
| }
|
| /**
| * 饼图（南丁格尔图）配置
| * @param {String} name 系列名称
| * @param {Array} chartData 数据
| * @param {boolean} sort 是否排序
| * @param {number} showLegendCount 显示标签数量
| * @returns
| */
| function pieChartOption(name, chartData, showLegendCount) {
| let _data = chartData
| if (showLegendCount) {
| _data = genData(_data, showLegendCount)
| }
| return {
| // legend: {
| // textStyle: {
| // fontSize: fontSize,
| // color: 'white'
| // }
| // },
| grid: {
| left: '10%',
| right: '4%',
| bottom: '3%',
| containLabel: true
| },
| tooltip: {
| trigger: 'item'
| },
| series: [
| {
| name: name,
| type: 'pie',
| // radius: '55%',
| // center: ['50%', '50%'],
| data: _data,
| roseType: 'radius',
| percentPrecision: 0,
| label: {
| position: 'outside',
| formatter: '{b}({d}%)',
| color: 'rgba(255, 255, 255, 0.8)'
| },
| labelLine: {
| lineStyle: {
| color: 'rgba(255, 255, 255, 0.3)'
| },
| smooth: 0.2,
| length: 5,
| length2: 5
| },
| itemStyle: {
| color: '#c23531',
| shadowBlur: 200,
| shadowColor: 'rgba(0, 0, 0, 0.5)'
| },
| animationType: 'scale',
| animationEasing: 'elasticOut',
| animationDelay: function (idx) {
| return Math.random() * 200
| }
| }
| ]
| }
| }
|
| export { pieChartOption }
|
|
