程序博客网 > 淘宝新手卖家交流群

Echarts柱状图，饼状图

来源：互联网发布：淘宝新手卖家交流群编辑：程序博客网时间：2024/05/22 17:30

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

阅读全文

0 0

淘宝新手卖家交流群

淘宝新手卖家交流群

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子华图网校华图在线华图app 河北华图华图安徽甘肃华图山西华图山东华图内蒙古华图四川华图华图教育app 湖北华图广东华图华图教师华图首页华图招聘华图砖题库华图app下载华图广东华图网华图电话天津华图陕西华图公务员华图华图面试华图河南湖南华图广州华图华图培训华图公务员华图面试班华图湖北福建华图辽宁华图华图培训班申论华图华图教师华图行测教师华图行测华图华图考研