echarts一个画图区域内可以实现下面的效果吗？

Question

Answer 1

大佬

Answer 2

是的，可以在同一个eacharts 的画图区域内，画出6个同样尺寸的、不同数据和标题的 《饼+环状》图：

试做以下练习：
打开网页：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, 

6.  尝试在option 内填入以下标题定义，以便分别写出3个小标题：

 title: [
  {
        text:  '采购类别&采购方式',
        left: '22%',
        top: '50%',
        textAlign: 'center',
        textStyle: {
            fontSize: '30',
            fontWeight: '400',
            color: '#61033f',
            textAlign: 'center',
            textBorderColor:'rgba(0, 0, 0, 0)',
            textShadowColor:'#fff',
            textShadowBlur:'0',
            textShadowOffsetX:0,
            textShadowOffsetY:1,
        },
    }, {
        text:'采购方式&评价方式',
        left: '48%',
        top: '50%',
        textAlign: 'center',
        textStyle: {
            fontSize: '30',
            fontWeight: '400',
            color: '#295008',
            textAlign: 'center',
            textBorderColor:'rgba(0, 0, 0, 0)',
            textShadowColor:'#fff',
            textShadowBlur:'0',
            textShadowOffsetX:0,
            textShadowOffsetY:1,
        },
    }, {
        text:'评价方式&采购类别',
        left: '74%',
        top: '50%',
        textAlign: 'center',
        textStyle: {
            fontSize: '30',
            fontWeight: '400',
            color: '#a06a0a',
            textAlign: 'center',
            textBorderColor:'rgba(0, 0, 0, 0)',
            textShadowColor:'#fff',
            textShadowBlur:'0',
            textShadowOffsetX:0,
            textShadowOffsetY:1,
        }
    
    } ],

7.   最后，将其余的数据，依次改成楼主自身的数据。