1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>饼状图</title> 5 @*echarts画图必须要引用的*@ 6 <script src="~/Scripts/echarts.min.js"></script> 7 </head> 8 <body> 9 @* 画图要用的空间 *@ 10 <div id="divEcharts" style="800px;height:600px;"></div> 11 </body> 12 </html> 13 <script type="text/javascript"> 14 15 option = { 16 tooltip: { //悬浮时提示的信息 17 trigger: 'item', 18 formatter: "{a} <br/>{b}: {c} ({d}%)" //提示的格式 19 }, 20 legend: { //图例 21 orient: 'vertical', //方位 vertical垂直的 22 x: 'left', 23 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] //数据 24 }, 25 series: [ 26 { 27 name: '访问来源', 28 type: 'pie', //图的类型 pie饼状图 29 radius: ['50%', '70%'], //图标的范围 30 avoidLabelOverlap: false, 31 label: { //图中心的标注 32 normal: { 33 show: false, 34 position: 'center' 35 }, 36 emphasis: { 37 show: true, 38 textStyle: { 39 fontSize: '30', 40 fontWeight: 'bold' 41 } 42 } 43 }, 44 labelLine: { 45 normal: { 46 show: false 47 } 48 }, 49 data: [ //要画的数据 50 { value: 335, name: '直接访问' }, 51 { value: 310, name: '邮件营销' }, 52 { value: 234, name: '联盟广告' }, 53 { value: 135, name: '视频广告' }, 54 { value: 1548, name: '搜索引擎' } 55 ] 56 } 57 ] 58 }; 59 60 61 //初始化echarts实例 62 var myChart = echarts.init(document.getElementById('divEcharts')); 63 //使用制定的配置项和数据显示图表 64 myChart.setOption(option); 65 66 </script>