echarts如何设置嵌套饼图的宽度

忘是亡心i 2022-12-19 09:29 279阅读 0赞

### 目录 ###

*  一：设置嵌套饼图宽度
 *  二：效果
 *   *  1. 修改前
     *  2. 修改后
     *  3. 内层和外层宽度不一致的效果

# 一：设置嵌套饼图宽度 #

**内层和外层宽度要设置一样，否则就会发现嵌套的饼图移动到外层饼图以外了**

option = { 
        tooltip: { 
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: { 
            orient: 'vertical',
            left: 10,
            data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
        },
        series: [
            { 
                name: '访问来源',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
    
                label: { 
                    position: 'inner'
                },
                labelLine: { 
                    show: false
                },
                data: [
                    { value: 335, name: '直达', selected: true},
                    { value: 679, name: '营销广告'},
                    { value: 1548, name: '搜索引擎'}
                ],
                width:'50%' // 内层和外层宽度要设置一样，否则就会发现嵌套的饼图移动到外层饼图以外了
            },
            { 
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '55%'],
                width:'50%',// 内层和外层宽度要设置一样，否则就会发现嵌套的饼图移动到外层饼图以外了
                data: [
                    { value: 335, name: '直达'},
                    { value: 310, name: '邮件营销'},
                    { value: 234, name: '联盟广告'},
                    { value: 135, name: '视频广告'},
                    { value: 1048, name: '百度'},
                    { value: 251, name: '谷歌'},
                    { value: 147, name: '必应'},
                    { value: 102, name: '其他'}
                ]
            }
        ]
    };

# 二：效果 #

## 1. 修改前 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]

## 2. 修改后 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 3. 内层和外层宽度不一致的效果 ##

**代码：**

option = { 
        tooltip: { 
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: { 
            orient: 'vertical',
            left: 10,
            data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
        },
        series: [
            { 
                name: '访问来源',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
    
                label: { 
                    position: 'inner'
                },
                labelLine: { 
                    show: false
                },
                data: [
                    { value: 335, name: '直达', selected: true},
                    { value: 679, name: '营销广告'},
                    { value: 1548, name: '搜索引擎'}
                ],
                width:'30%'
            },
            { 
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '55%'],
                width:'100%',
                data: [
                    { value: 335, name: '直达'},
                    { value: 310, name: '邮件营销'},
                    { value: 234, name: '联盟广告'},
                    { value: 135, name: '视频广告'},
                    { value: 1048, name: '百度'},
                    { value: 251, name: '谷歌'},
                    { value: 147, name: '必应'},
                    { value: 102, name: '其他'}
                ]
            }
        ]
    };

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8b4ec24415b04bf9a66a41ebf8ea4b0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ac417ce3d239459bbac6458903f618aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/a476517ec27f4e1ea6bb974bd7c22d0a.png