echarts环形图中间展示数据
时间: 2023-06-28 20:11:53 浏览: 1290
要在 echarts 环形图中间展示数据,可以使用 echarts 中的 graphic 组件和 text 组件。具体步骤如下:
1. 在 echarts 的 option 中添加一个 graphic 组件,用来绘制中间的圆形区域:
```
graphic: {
type: 'circle',
shape: {
cx: '50%',
cy: '50%',
r: 60
},
style: {
fill: '#fff',
stroke: '#ccc',
lineWidth: 2
}
}
```
2. 在 graphic 组件中添加一个 text 组件,用来显示要展示的数据:
```
graphic: {
type: 'circle',
shape: {
cx: '50%',
cy: '50%',
r: 60
},
style: {
fill: '#fff',
stroke: '#ccc',
lineWidth: 2
},
children: [{
type: 'text',
z: 100,
left: 'center',
top: 'middle',
style: {
text: '80%',
fill: '#333',
fontSize: 24,
fontWeight: 'bold'
}
}]
}
```
其中,children 数组中的 text 组件的 style.text 属性可以设置要展示的数据,例如上面的例子中展示的是 80%。可以根据需求自行修改。
完整的 option 代码示例:
```
option = {
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}],
graphic: {
type: 'circle',
shape: {
cx: '50%',
cy: '50%',
r: 60
},
style: {
fill: '#fff',
stroke: '#ccc',
lineWidth: 2
},
children: [{
type: 'text',
z: 100,
left: 'center',
top: 'middle',
style: {
text: '80%',
fill: '#333',
fontSize: 24,
fontWeight: 'bold'
}
}]
}
};
```
阅读全文