官网： http://echarts.baidu.com/index.html
文档： http://echarts.baidu.com/echarts2/doc/doc.html
1 <html> 2 <head> 3 <title>echart示例</title> 4 <script src="echarts-all.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <div id="main1" style="1000px;height:600px;border:1px solid #dddddd;margin:10px auto;"></div> 8 <script type="text/javascript"> 9 // 基于准备好的dom，初始化echarts实例 10 var myChart1 = echarts.init(document.getElementById('main1')); 11 12 // 指定图表的配置项和数据 13 option = { 14 title : { 15 x: 'center', // 水平安放位置，默认为左对齐，可选为： 16 // 'center' ¦ 'left' ¦ 'right' 17 // ¦ {number}（x坐标，单位px） 18 y: 'top', 19 text : '环形图', 20 subtext : '1', 21 itemGap : 0, 22 textStyle : { 23 fontSize: 24, 24 fontWeight: 'bolder', 25 color: '#333' 26 }, 27 subtextStyle : { 28 fontSize: 18, 29 fontWeight: 'bolder', 30 color: '#dddddd' 31 } 32 }, 33 tooltip: { 34 trigger: 'item', 35 formatter: "{a} <br/>{b}: {c} ({d}%)" 36 }, 37 legend: { 38 orient: 'vertical', 39 x: 'left', 40 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 41 }, 42 series: [ 43 { 44 name:'访问来源', 45 type:'pie', 46 radius: ['50%', '70%'], 47 avoidLabelOverlap: false, 48 label: { 49 normal: { 50 show: false, 51 position: 'center' 52 }, 53 emphasis: { 54 show: true, 55 textStyle: { 56 fontSize: '30', 57 fontWeight: 'bold' 58 } 59 } 60 }, 61 labelLine: { 62 normal: { 63 show: false 64 } 65 }, 66 data:[ 67 {value:335, name:'直接访问'}, 68 {value:310, name:'邮件营销'}, 69 {value:234, name:'联盟广告'}, 70 {value:135, name:'视频广告'}, 71 {value:1548, name:'搜索引擎'} 72 ] 73 } 74 ] 75 }; 76 77 // 使用刚指定的配置项和数据显示图表。 78 myChart1.setOption(option); 79 myChart1.on('click', function eConsole(param) { 80 //这个params可以获取你要的饼图中的当前点击的项的参数 81 alert(param.value+'-'+param.name+'-'+param.seriesName); 82 }); 83 /* 84 85 此外param参数包含的内容有： 86 param.seriesIndex：系列序号（series中当前图形是第几个图形第几个，从0开始计数） 87 param.dataIndex：数值序列（X轴上当前点是第几个点，从0开始计数） 88 param.seriesName：legend名称 89 param.name：X轴值 90 param.data：Y轴值 91 param.value：Y轴值 92 param.type：点击事件均为click 93 94 */ 95 </script> 96 </body> 97 </html>