echarts一个画图区域内可以实现下面的效果吗?
回答
做以下练习:
打开网页:https://echarts.apache.org/next/examples/zh/editor.html?c=pie-nest
1. 去掉
label: {
....
},
2. 将 series: [....] 中的 :中心饼图和环状圈的定义,
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false
},
data: [
{value: 1548, name: '搜索引擎'},
{value: 775, name: '直达'},
{value: 679, name: '营销广告', selected: true}
]
},
{
name: '访问来源',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30,
},
data: [
{value: 1048, name: '百度'},
{value: 335, name: '直达'},
{value: 310, name: '邮件营销'},
{value: 251, name: '谷歌'},
{value: 234, name: '联盟广告'},
{value: 147, name: '必应'},
{value: 135, name: '视频广告'},
{value: 102, name: '其他'}
]
}
在 [ ] 中 复制粘贴成 6 组。
3. 将 series: [....] 中的 :中心饼图和环状圈的定义数据分别按下列要求加以添加/修改:
中心饼图 :
radius: [0, '15%'],
环状圈:
radius: ['20%', '25%'],
中心饼图,以及环状圈 的 中心位置:
center: ['25%', '30%'],
center: ['50%', '30%'],
center: ['75%', '30%'],
center: ['25%', '80%'],
center: ['50%', '80%'],
center: ['75%', '80%'],
就可以在一页里,同时显示楼主所要的 6 个 "中心饼图 + 环状圈"。
4. 向 legend: { ...} 添加:
orient: 'vertical',
right: 10,
5. 最后,将其余的数据,依次改成楼主自身的数据。
大佬