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

来源：互联网发布：淘宝主播陈潇编辑：程序博客网时间：2024/05/06 14:22
刚到公司接到一个几乎全是图表的项目,之前从没接触过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>
0 0