ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
来源:互联网 发布:php报表 编辑:程序博客网 时间:2024/05/27 09:46
刚到公司接到一个几乎全是图表的项目,之前从没接触过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
- ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
- ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
- ECharts3.0饼状(环形图)之二------------手把手教你每一项的样式设计
- ECharts3.0饼状(环形图)------------手把手教你每一项的样式设计
- ECharts3.0饼状 柱状退(环形图)------------手把手教你每一项的样式设计
- ECharts3.0折线图------------手把手教你每一项的样式设计
- ECharts3.0折线图------------手把手教你每一项的样式设计
- 不用派生CTreeCtrl不用繁琐的过程 教你如何让CTreeCtrl的每一项有ToolTip提示
- 从大一写到大四,手把手教你如何度过大学的每一年!
- 手把手教你学Word2Vec系列三之Similarity Queries
- 手把手系列之三——手把手教你做手擀打卤面
- 手把手系列之四十三—手把手教你做煎饼果子
- 为什么Android总是事无巨细地告诉你应用索取的每一项权限?
- 【原创】手把手教你Linux下的多线程设计--Linux下多线程编程详解(三)
- 手把手教你mysql(三)Table的基本操作
- 手把手教你Photoshop蒙版的使用(三)
- 手把手教你mysql(三)Table的基本操作
- nginx status 每一项的含义
- This is a prerequisite condition to test whether sufficient total swap space is available on system
- String.getBytes()与编码格式
- 【学习C++】继承与派生
- Java面试题全集(下)
- 【Android开发技巧】Fragment中获取Context对象的两种方法
- ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
- 二哥OJ(四)
- ccf csp 地铁修建
- Broadcast中几个易混点(长期更新,欢迎补充)
- react入坑之可复用组件
- C++如何使用fsteam一次读完未知大小的文件
- 1381简易计算器
- makefile 多层嵌套实例
- scrapy的安装