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.   最后,将其余的数据,依次改成楼主自身的数据。

大佬

以上是echarts一个画图区域内可以实现下面的效果吗?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>