Echarts柱状图，饼状图

时间 2021-07-12

绑定数据为你要显示的，name为名称num为数量

<script type="text/javascript" src="${ctx}/js/echarts.common.min.js"></script>

<script> $(function(){$("#searchId").click(function(){window.location.href="${ctx}/anfangyun/expo/statistical/apply.ht?searchYear="+$("#searchYear").val()+"&searchType="+$("#searchType").val()+"&searchPic="+$("#searchPic").val();});var type='${searchType}';var pic='${searchPic}';$(".c"+pic).show().siblings().hide();var map = '${staitsticalMap}';var keys =getallkeysvalues("keys",map) ;var values=getallkeysvalues("values",map) ;var picname="";if(type==2){picname="企业性质数据分析";}else{picname="所在地域数据分析";}pic1("参展商数据",picname,'pic1',keys,values);pic2("参展商数据",picname,'pic2',map); }); //拆分集合:keys所有名字,values所有对应的数量 function getallkeysvalues(type,list){var arr = list.replaceAll("{","").replaceAll("}","").split(",");var keys="";var values="";for(var i=0;i<arr.length;i++){keys +=arr[i].split("=")[0]+","values +=arr[i].split("=")[1]+","}keys = keys.substring(0,keys.length-1);values = values.substring(0,values.length-1);if(type=="keys"){return keys;}if(type=="values"){return values;} } //根据key重命名 function getname(name){if(name==1){ name="国有企业";}else if(name==2){name="集体所有制企业";}else if(name==3){name="联营企业";}else if(name==4){name="中外合作企业";}else if(name==5){name="中外合资企业";}else if(name==6){name="外商独资企业";}else if(name==7){name="私营企业及其他";}else if(name==8){name="其他";}return name; } //树状图 function pic1(tableTitle,titleTitle,id,dataName,dataNum){ var myChart1 = echarts.init(document.getElementById(id)); var xAxisdata = dataName.substring(0,dataName.length).split(","); //这里是企业性质根据值重新命名 for(var i=0;i<xAxisdata.length;i++){ xAxisdata[i] =getname(xAxisdata[i]); } var seriesname = dataNum.substring(0,dataNum.length).split(","); // 指定图表的配置项和数据 var option1 = {title: {text:tableTitle},tooltip: {},legend: {data:[titleTitle]}, xAxis: {axisLabel:{interval:0,rotate:-30},data: xAxisdata},yAxis: {},series: [{name:titleTitle,type: 'bar', itemStyle: { normal: { color: function(params) { var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0','#999999','#6666FF','#CC9900','#00FF00','#66CCFF', '#D7514B','#C6E519','#F4E101','#F0815A','#26C1C0','#D7512B','#C6E219','#F4E201','#F0215A','#22C1C0', '#D2504B','#C2E579','#F2E001','#F2805A','#52C0C0' ]; return colorList[params.dataIndex] } } }, barWidth :100,data:seriesname}]}; myChart1.setOption(option1);// 使用刚指定的配置项和数据显示图表。 } //饼状图 function pic2(tableTitle,titleTitle,id,map){ var myCharts2 = echarts.init(document.getElementById(id)); map = map.substring(1,map.length-1); var res=[];//将数据库取出的数据放入数组 var mapVar = map.split(",");for (var i = 0; i < mapVar.length; i++) {var mapKV =mapVar[i].split("=");var name= getname(mapKV[0]);res.push({name:name,value:mapKV[1]});} var option2 = {backgroundColor: 'white',title: {text:titleTitle,left: 'center', top: 20,textStyle: {color: '#ccc'}}, tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {d}%"},visualMap: {show: false,min: 500,max: 600,inRange: {colorLightness: [0, 1]}}, series : [{name:titleTitle,type:'pie',clockwise:'true',startAngle:'0',radius : '60%',center: ['50%', '50%'],data:res }]};myCharts2.setOption(option2); } </script> </head> <body><div class="panel"><div class="panel-top"><div class="tbar-title"><span class="tbar-label">参展企业数据统计${searchYear}</span></div><div class="panel-toolbar"><div class="toolBar"><div class="group"><a class="link " id="searchId" style="border-color:#f60;color:#f60;">查询</a></div></div> </div> </div><div class="panel-search"><form id="searchForm" method="post" ><div class="row"><div class="secondLayer_con"> <ul> <li> <span>统计维度：</span><select id="searchType" name="searchType"> <option value="1">所在地域</option> <option value="2">企业性质</option> </select></li><li> <span>数据形式：</span><select id="searchPic" name="searchPic"><option value="0">表格</option> <option value="1">柱状图</option> <option value="2">饼状图</option> </select></li><li><span>年度：</span><select id="searchYear" name="searchYear"><option value="">全部</option><c:forEach items="${years}" var="year"><option value="${year}">${year}</option></c:forEach> </select></li></ul></div></div></form></div></div><div><div id="div1"><div class="c0"> <div> <ul><li><c:if test="${searchType!=2}">所在地域数据</c:if><c:if test="${searchType==2}">企业性质数据</c:if></li> <c:forEach items="${staitsticalMap}" var="map"> <li> <c:if test="${searchType!=2}"> ${map.key} </c:if> <c:if test="${searchType==2}"> <c:if test="${map.key==1}">国有企业</c:if> <c:if test="${map.key==2}">集体所有制企业</c:if> <c:if test="${map.key==3}">联营企业</c:if> <c:if test="${map.key==4}">中外合作企业</c:if> <c:if test="${map.key==5}">中外合资企业</c:if> <c:if test="${map.key==6}">外商独资企业</c:if> <c:if test="${map.key==7}">私营企业及其他</c:if> <c:if test="${map.key==8}">其他</c:if> </c:if> </li> </c:forEach> </ul> </div> <div > <ul><li>企业数量</li> <c:forEach items="${staitsticalMap}" var="map"> <li>${map.value}</li> </c:forEach> </ul></div> <div > <ul><li>占比例</li> <c:forEach items="${staitsticalMap}" var="map"> <li><fmt:formatNumber value="${map.value/mapSize}" pattern="0.00%"/></li> </c:forEach> </ul></div> </div> <div class="c1" id="pic1" style="display:none"></div> <div class="c2" id="pic2" style="display:none"></div> </div></div> </body> </html>