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>