一、实现效果二、实现原理echarts官网：https://echarts.apache.org/zh/index.html三、完整代码https://gitee.com/susuhhhhhh/responsive-web-page四、主要代码varmyChart=echarts.init(document.getElementById('main3'));varoption={title:{text:'Thisisanechartschart'},tooltip:{trigger:'item',position:function(point,params,dom,rect,size){让x=0;//x坐标位置lety=0;//y坐标位置letpointX=point[0];让pointY=point[1];让boxWidth=size.contentSize[0];让boxHeight=size.contentSize[1];如果(boxWidth>pointX){x=5;}else{x=pointX-boxWidth;}if(boxHeight>pointY){y=5;}else{y=pointY-boxHeight;}返回[x,y];}},legend:{x:'70%',y:'25%',orient:'vertical',align:'right',//top:'5%',//left:'center'格式器：函数(name){ returnname.length>5?name.substr(0,5)+"...":name; },tooltip:{show:true}},series:[{name:'Accesssource',type:'pie',center:['35%','50%'],radius:['10%','70%'],avoidLabelOverlap:false,itemStyle:{borderRadius:10,borderColor:'#ff5500',borderWidth:2,//normal:{//show:true,//formatter:'{b}:{c}({d}%)'//自定义显示格式(b:name,c:value,d:percentage)//}normal:{label:{show:true,position:'inner',formatter:"{d}%"},labelLine:{show:true}},强调:{shadowBlur:20,shadowOffsetX:0,shadowColor:'rgba(30,144,255)，0.5)',label:{show:true,fontSize:'20',fontWeight:'bold'}}},labelLine:{show:false},data:[{value:1048,name:'搜索引擎搜索引擎搜索引擎搜索引擎'},{value:735,name:'DirectAccessDirectAccessDirectAccessDirectAccess'},{value:580,name:'EmailMarketingEmailMarketingEmailMarketingEmailMarketing'},{value:484,name:'联盟广告网络广告网络广告网络广告'},{value:300,name:'视频广告视频广告视频广告'}]}]};myChart.setOption(选项);window.addEventListener('resize',function(){myChart.resize()})
