饼图的属性和南丁格尔双图并列显示

刚开始学习echart遇到了许多麻烦，饼图怎么在一个box中并列显示
初学，总是认知不全，很多都不知道怎么回事，知识拿着自己的经验乱布局，我是把box又分了两份，可怜的饼图在二分之一的地方还要居中对齐（这都是前期不会不懂， 给自己找麻烦）

• 希望我遇到的问题解决的办法能帮到你，助你我成长

这篇是对饼图讲解，我每篇ehcart的文章都会有注释，养成习惯真的很重要！！！
我没一篇饼图的文章代码中注释都很少会有重复，中间包括了很多属性的注释，留心的会有新发现

 <!-- 引入 echarts.js -->
   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

给一个有宽高的容器很重要，应为它有用

  <!-- 给一个有宽高的容器 -->
    <div id="app" style="width:1000px;height:400px;margin:300px auto;"></div>

<script type="text/javascript">
            var myApp = echarts.init(document.getElementById('app'));
            option = {
    title: {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {//提示框
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {//图例组件样式设置
        left: 'center',
        top: 'bottom',
        orient:'vertical',
        align:'auto',
        // padding:[5,10],
        itemGap:20,//图例之间间隔
        itemWidth:20,//图例宽度
        itemHeight:20,
        //是否在缩放时保持该图形的长宽比。
        symbolKeepAspect:false,
        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'],//图例的数据数组
        selected:{//选中的图例
            'rose4':true,
            'rose1':false,
            'rose2':false,
            'rose3':false,
            'rose5':false,
            'rose6':false,
            'rose7':false,
            'rose8':false,
        },
        textStyle:{//公共选中图例中文字样式
            color:'#0f0',
            // italic斜体   normal 正常   oblique倾斜
            fontStyle:'oblique',
            fontWeight:'lighter',//lighter400 bolder300 bold200 normal100
            // fontSize:22 ,//字体大小
            // lineHeight:80 ,//行高可以改变排列
            // bakcgroundColor:'red',
            // borderWidth:200,//文字边框线
        },
        // borderRadius:[5,5,5,5],
        // borderWidth:20, //边框线
        
    },
    toolbox: {// 是否显示工具栏组件
        feature: {
            // mark: {show: false},
            dataView: {show: true, readOnly: false}, //g工具视图  是否显示   是否不可编辑   
            magicType: {//动态类型切换
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},//配置项还原。
            saveAsImage: {show: true}//保存为图片
        }
    },
    series: [
        {
            name: '半径模式',
            type: 'pie',
            radius: [20, 110],
            center: ['25%', '50%'],
            roseType: 'radius',
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [//系列中的数据内容数组
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        },
        {
             label: {
                show: false
            },
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'],
            roseType: 'area',
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        },
        {
                        name:'外边距',
                        type:'pie',
                        clockWise:true,//顺时加载   加载页面时外圈的加载方向   false逆时针
                        hoverAnimation:false,// true鼠标移入变大   不变 false
                        center:['25%','50%'],
                        radius:['80%','80%'],
                        label:{
                            normal:{
                                show:false//好像是引线
                            }
                        },
                        data:[{
                            value:1,
                            name:'111',
                            itemStyle:{//单个拐点标志的样式设置
                                normal:{
                                    borderWidth:2,
                                    borderColor: '#61bad3'
                                }
                            }
                        }]
                    }
    ]
};

            myApp.setOption(option);

希望对初学者有帮助