1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!--jquery 根据自己的路径引入或下载 --> 7 <script src="js/jquery-1.9.1.min.js"></script> 8 <style type="text/css"> 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 </style> 14 </head> 15 <body> 16 17 <div id="main"></div> 18 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> 19 <script type="text/javascript"> 20 // 饼状图插件的部分内容 21 22 var chart = echarts.init(document.getElementById('main')); 23 var optionbar = { 24 color:['#df6c33','#018dfe'],//饼状图每部分的颜色 25 tooltip: { 26 trigger: 'item', 27 // formatter: "{a} <br/>{b}: {c} ({d}%)", 28 formatter: "{d}%",//鼠标滑过时候的显示 29 // show:false, 30 }, 31 series: [{ 32 // name: '客户', 33 type: 'pie', 34 radius: ['35%', '50%'],//控制饼状图的大小 35 center: ['50%', '50%'],//控制饼状图所在的位置 36 avoidLabelOverlap: true, 37 38 label: { 39 normal: { 40 formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比 41 }, 42 emphasis: { 43 show: true, 44 textStyle: { 45 fontSize: '10',//字体大小 46 // fontWeight: 'bold' 47 } 48 } 49 }, 50 labelLine: { 51 normal: { 52 show: true 53 } 54 }, 55 data: [20,96]//后台请求到的数据直接复制即可 56 }] 57 }; 58 59 60 chart.setOption(optionbar) 61 //设置默认选中高亮部分 62 chart.dispatchAction({ 63 type: 'highlight', 64 seriesIndex: 0, 65 dataIndex: 0 66 }); 67 chart.on('mouseover', function(e) { 68 //当检测到鼠标悬停事件，取消默认选中高亮 69 chart.dispatchAction({ 70 type: 'downplay', 71 seriesIndex: 1, 72 dataIndex: 0 73 }); 74 //高亮显示悬停的那块 75 chart.dispatchAction({ 76 type: 'highlight', 77 seriesIndex: 1, 78 dataIndex: e.dataIndex 79 }); 80 }); 81 //检测鼠标移出后显示之前默认高亮的那块 82 chart.on('mouseout', function(e) { 83 chart.dispatchAction({ 84 type: 'highlight', 85 seriesIndex: 0, 86 dataIndex: 0 87 }); }); 88 89 90 91 92 93 94 </script> 95 </body> 96 </html>
