echarts实现环形图中间展示数据
更新时间: 2025-06-16 13:49:45
就是如上图的效果，我懒得写html，直接用js和echarts实现的这个效果
# 原理
环形饼图其实不难，中间的文字其实是label，当鼠标放在相应的饼上的时候就修改默认显示的label
# 实现
chart = echarts.init(myCharts.value)
chart.setOption({
legend: {
top: 'center',
right: '5%',
orient: 'vertical',
},
series: [
{
type: 'pie',
radius: ['60%', '90%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
color:'#4c4a4a',
formatter: '{total|{c}}'+ '\n\r' + '{active|{b}}',
rich: {
total:{
fontSize: getFontPx(35),
fontFamily : "微软雅黑",
color:'#454c5c'
},
active: {
fontFamily : "微软雅黑",
fontSize: getFontPx(16),
color:'#6c7a89',
lineHeight:30,
},
},
emphasis: {//中间文字显示
show: true,
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
},
tooltip: {
show: false
}
},
data: [
{ value: 1, name: '轻微超限', itemStyle:{color:'rgba(245, 158, 10, 1)'} },
{ value: 2, name: '中度超限' ,itemStyle:{color:'rgba(255, 94, 78, 1)'} },
{ value: 3, name: '严重超限',itemStyle:{color:'rgba(220, 38, 37, 1)'} }
]
}
]
})
// 默认选中第一条数据
chart.dispatchAction({type: 'highlight',dataIndex: 0});
// 鼠标悬停的时候先取消掉所有的高亮，再高亮当前鼠标悬停的数据
chart.on('mouseover', 'series.pie', data => {
chart.dispatchAction({type: 'downplay',seriesIndex: 0});
chart.dispatchAction({type: 'highlight',dataIndex: data.dataIndex});
})
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
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