ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计

刚到公司接到一个几乎全是图表的项目,之前从没接触过EChart,不得以慢慢学

现在把我的经验贡献出来  

代码及详细解释如下:

<div class="membersickchart" style="width: 550px;height:316px;position: relative">
    <!--患病率-->
    <div class="membersickchart_ul">
        <ul style="margin-bottom: 94px;">
            <li><p>28%</p><p>高血压</p></li>
            <li><p>18%</p><p>高血糖</p></li>
            <li><p>12%</p><p>高血脂</p></li>
            <li><p>10%</p><p>脑卒中</p></li>
            <li><p>6%</p><p>冠心病</p></li>
        </ul>
        <ul>
            <li><p>28%</p><p>心绞痛</p></li>
            <li><p>18%</p><p>脑淤血</p></li>
            <li><p>12%</p><p>脑血栓</p></li>
            <li><p>10%</p><p>脑萎缩</p></li>
            <li><p>6%</p><p>脑栓塞</p></li>
        </ul>
    </div>
    <!--图表-->
    <div id="main6" style="width: 550px;height:316px">
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main6'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'right',
                    orient: 'horizontal',
                    width:350,      //图行例组件的宽度,默认自适应
                    x: 'right',  //图例显示在右边  设置数字就是离左边多远
                    top: 20,   //图例在垂直方向上面显示居中
                    itemWidth:10,  //图例标记的图形宽度
                    itemHeight:10, //图例标记的图形高度
                    itemGap:15,

                    data: [
                        {name: '高血压', icon: 'circle',},  // 强制设置图形为圆。}
                        {name: '高血糖', icon: 'circle',},
                        {name: '高血脂', icon: 'circle',},
                        {name: '脑卒中', icon: 'circle',},
                        {name: '冠心病', icon: 'circle',},
                        {name: '心绞痛', icon: 'circle',},
                        {name: '脑淤血', icon: 'circle',},
                        {name: '脑血栓', icon: 'circle',},
                        {name: '脑萎缩', icon: 'circle',},
                        {name: '脑栓塞', icon: 'circle',},
                    ]
                },
                color:['#36e4bb','#ea97dd','#7493e5','#a99cf4','#fd87ab','#34abec','#ebc54a','#fff45c','#b3d465','#cadd9c',],
                series : [
                        /*大饼*/
                    {
                        name: '患病率',
                        type: 'pie',
                        radius : '50%',
                        center: ['20%', '60%'],
                        data:[
                            {value:250, name:'高血压'},
                            {value:150, name:'高血糖'},
                            {value:250, name:'高血脂'},
                            {value:150, name:'脑卒中'},
                            {value:250, name:'冠心病'},
                            {value:150, name:'心绞痛'},
                            {value:250, name:'脑淤血'},
                            {value:150, name:'脑血栓'},
                            {value:150, name:'脑萎缩'},
                            {value:250, name:'脑栓塞'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                        /*第一个小饼*/
                    {
                        name: '高血压患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['42%', '35%'],
                        color:['#36e4bb','#eeeeee'],
                        data: [
                            {value: 28, name:'有病'},
                            {value: 72, name: '没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '高血糖患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['55%', '35%'],
                        color:['#ea97dd','#eee'],
                        data: [
                            {value: 18, name:'有'},
                            {value: 82, name: '没'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '高血脂4患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['68%', '35%'],
                        color:['#7493e5','#eeeeee'],
                        data: [
                            {value: 12, name:'患病'},
                            {value: 88, name: '没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '脑卒中患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['81%', '35%'],
                        color:['a99cf4','#eeeeee'],
                        data: [
                            {value: 32, name:'有'},
                            {value: 68, name: '真是没有病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['94%', '35%'],
                        color:['#fd87ab','#eeeeee'],
                        data: [
                            {value: 28, name:'哈哈'},
                            {value: 72, name: '没的病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['42%', '65%'],
                        color:['#34abec','#eeeeee'],
                        data: [
                            {value: 28, name:'有瑕疵'},
                            {value: 72, name: '没毛病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['55%', '65%'],
                        color:['#ebc54a','#eeeeee'],
                        data: [
                            {value: 28, name:'得了病'},
                            {value: 72, name: '真是没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['68%', '65%'],
                        color:['#fff45c','#eeeeee'],
                        data: [
                            {value: 28, name:'得病'},
                            {value: 72, name: '真心没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['81%', '65%'],
                        color:['#b3d465','#eeeeee'],
                        data: [
                            {value: 28, name:'真没有'},
                            {value: 72, name: '真没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    },
                    {
                        name: '冠心病患病率',
                        type: 'pie',
                        radius: '18%',
                        center: ['94%', '65%'],
                        color:['#cadd9c','#eeeeee'],
                        data: [
                            {value: 28, name:'可以有'},
                            {value: 72, name: '真没病'}
                        ],
                        itemStyle : {  //图形样式
                            normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label : {  //饼图图形上的文本标签
                                    show : false  //平常不显示
                                },
                            },
                        },
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </div>

</div>