绑定数据为你要显示的,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>