嵌套饼图的实现主要是定义多层数据，实际上只需要写成json格式的数组，多层数据源之间用逗号连接起来，自定义样式之后就可以实现，与非嵌套饼图没有很大的区别。
1.下载Echarts插件，官网地址：http://echarts.baidu.com/download.html
2.HTML页面引入
文件层级机构：
源码部分：
legend:图例说明
1<!DOCTYPE html> 2<html style="height: 100%"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body style="height: 100%; margin: 0"> 7<div id="container" style="height: 100%"></div> 8<script type="text/javascript" src="echarts/echarts.js"></script> 9<script type="text/javascript"> 10var dom = document.getElementById("container"); 11var myChart = echarts.init(dom); 12var app = {}; 13option = null; 14option = { 15 backgroundColor:'#FAFAD2', 16 title: { 17 text: '国民营销信息来源渠道', 18 left: 'center', 19 //标题栏的高度，值越大，距离顶部的距离越大 20 top: 50, 21 //标题栏字体的颜色 22 textStyle: { 23 color: '#FFD700' 24 } 25 }, 26 legend:{ 27 orient:'vertical', 28 x:'left', 29 data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'] 30 }, 31 tooltip:{ 32 trigger: 'item', 33 // ( 访问来源： 34 // 百度:1048 40.9%) 35 formatter: "{a} <br/>{b}:{c} ({d}%)" 36 }, 37 series :[ 38 { 39 //饼图中内容介绍 40 name:'客户访问来源', 41 //统计表的类型 42 type:'pie', 43 //饼图的弧度，值越小生成的饼状图越小 44 radius : [0,'30%'], 45 //饼状图的外围标签，位置定义inner文字标签在扇形内部 46 label: { 47 normal: { 48 position:'inner' 49 } 50 }, 51 //指向外围标签的线条,当不定义样式时候线条默认与扇形颜色相同 52 labelLine: { 53 normal: { 54 show:false 55 } 56 }, 57 //内层数据 58 data:[ 59 {value:335, name:'直接访问'}, 60 {value:310, name:'邮件营销'}, 61 {value:274, name:'联盟广告'}, 62 {value:235, name:'视频广告'}, 63 {value:400, name:'搜索引擎'} 64 ] 65 }, 66 { 67 name:'访问来源', 68 type:'pie', 69 radius:['40%','55%'], 70 label:{ 71 normal:{ 72 formatter:'{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c} {per|{d}%}', 73 //外部标签的背景色 74 backgroundColor:'#FFA07A', 75 //外部标签的边框颜色 76 borderColor:'#DCDCDC', 77 borderWidth:1, 78 borderRadius:4, 79 rich:{ 80 a:{ 81 color:'#999', 82 lineHeight:22, 83 align:'center' 84 }, 85 //外围标签内部划线颜色 86 hr: { 87 borderColor: '#708090', 88 width: '100%', 89 borderWidth: 0.5, 90 height: 0 91 }, 92 b: { 93 fontSize: 16, 94 lineHeight: 33 95 }, 96 //显示百分比数据的颜色和背景色 97 per: { 98 color: '#CD5C5C', 99 backgroundColor: '#FFDEAD', 100 padding: [2, 4], 101 borderRadius: 2 102 } 103 } 104 105 } 106 107 }, 108 //外层数据 109 data:[ 110 {value:335, name:'直达'}, 111 {value:310, name:'邮件营销'}, 112 {value:234, name:'联盟广告'}, 113 {value:135, name:'视频广告'}, 114 {value:1048, name:'百度'}, 115 {value:251, name:'谷歌'}, 116 {value:147, name:'必应'}, 117 {value:102, name:'其他'} 118 ] 119 120 } 121 122 ] 123 124};; 125if (option && typeof option === "object") { 126 myChart.setOption(option, true); 127} 128 129 </script> 130 </body> 131</html>
实现的效果：
