綁定數據爲你要顯示的，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>