Echarts从后台动态加载数据，一个页面有两个图，一个饼图，一个柱状图，但是只能出现一个，两个互相影响，总不能同时出来
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<jsp:include page="../tld.jsp" />
<div class="row clearfix">
<div class="col-md-4" style="padding: 0 1em 1em 0">
<div id="org_chart" style="height: 20em"></div>
</div>
<div class="col-md-8" style="padding: 0 0 1em 1em;">
<div id="serv_type" style="height: 20em"></div>
</div>
</div>
<div class="row clearfix"
style="background-color: #fff; padding-top: 1em">
<div class="col-md-12 column">
<div class="form-group form-inline" style="margin-left: 1em">
中介机构名称 <input type="text" class="form-control"
id="" placeholder="请输入机构名称" />
<button class="btn btn-primary">查询</button>
</div>
<div class="form-group form-inline" style="margin-left: 1em">
服务类型
<button id="agencytype" class="btn btn-primary">请选择</button>
</div>
<div class="form-group form-inline" style="margin-left: 1em">
机构服务
<button class="btn btn-primary">请选择</button>
<span> 企业</span>
<span> 事业单位</span>
社会组织
</div>
<div class="form-group form-inline" style="margin-left: 1em">
<div class="dropdown">
归属地
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
中国 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">美国</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">德国</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">阿拉伯</a></li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
省 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">陕西</a></li>
<li><a href="#">山东</a></li>
<li><a href="#">山西</a></li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
市 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">西安</a></li>
<li><a href="#">延安</a></li>
<li><a href="#">宝鸡</a></li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
区 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">新城区</a></li>
<li><a href="#">雁塔区</a></li>
<li><a href="#">未央区</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- <div class="row clearfix" style="margin-top: 1em;padding: 1em;background-color: #fff">
<div class="col-md-12">
<div class="form-group form-inline" style="margin-left: 1em">
排序：
<button class="btn btn-primary">最新</button>
好评
</div>
</div>
</div>
-->
<div id="dataBody" class="row clearfix"
style="margin-top: 1em; margin-bottom: 1em;"></div>
<%-- <script src="${ctx}/site/js/myEchart.js"></script> --%>
<script>
/* 饼图 */
var dom = document.getElementById("org_chart");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
backgroundColor: '#FFFFFF',
title: {
text: '服务机构数量（单位：个）',
left: 'left',
top: 20
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(65,105,225, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(65,105,225, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#096ac2',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
function initPieEcharts(){
$.ajax({
type: "POST",
url: "${ctx}/site/portal/josnFindNatureConunt",
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var names=["国家机关","事业单位","国有企业","国有控股企业","外资企业","合资企业","私营企业","社会组织","个人"];//定义两个数组
var nums=[];
$.each(result.dataList,function(key,values){
var obj = new Object();
obj.name = values.nature;
obj.value = values.count;
nums.push(obj);
});
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: {
name: ['数量'],
data: nums
}
});
}
});
}
/* 柱状图 */
var dom_serv_type = document.getElementById("serv_type");
var myChartSecond = echarts.init(dom_serv_type);
var app = {};
option_serv_type = null;
option_serv_type = {
backgroundColor: '#FFFFFF',
title: {
text: '服务类型数量（单位：个）',
left: 'left',
top: 20
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '个数',
type: 'bar',
barWidth: '60%',
data: []
}
]
};
;
function initBarEcharts(){
$.ajax({
type: "POST",
url: "${ctx}/site/portal/josnFindAgencyTypeConunt",
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var linNames=[];
var linNums=[];
$.each(result.dataList,function(key,values){
linNames.push(values.typeName);
linNums.push(values.count);
});
myChartSecond.setOption({ //加载数据图表
xAxis: {
data: linNames
},
series: {
name: ['数量'],
data: linNums
}
});
}
});
}
$(function(){
findUnitAgencyList();
findAgencyTypeList();
initPieEcharts();
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
initBarEcharts();
if (option_serv_type && typeof option_serv_type === "object") {
myChart.setOption(option_serv_type, true);
};
});
function findAgencyTypeList(){
$.post("${ctx}/site/portal/jsonFindAgencyTypeList",{},function(data){
var type = $("#agencytype");
var agenyTypeList = data.dataList;
$.each(agenyTypeList,function(){
type.after("<span> "+this.name+"</span>");
});
},"json");
}
function findUnitAgencyList(){
$.post("${ctx}/site/portal/jsonFindUnitAgencyList", {pageSize:10}, function(data){
data = JSON.parse(data);
var unitAgency = $("#dataBody");
var unitAgencyList = data.dataList;
$.each(unitAgencyList,function(){
unitAgency.append("<div class='col-md-4' style='margin-left:1em;width:32%;padding:1em;background-color: #fff'>"
+"<div class='row clearfix'>"
+"<div class='col-md-12'>"
+"<p style='margin-left: 1.6em'><a href='#'>"+this.name+"</a></p></div></div>"
+"<div class='row clearfix'>"
+"<div class='col-md-4' style='text-align: center'>"
+"<span><img width='70px' height='70px' src='"+this.imgUrl+"'></span>"
+"<p>"+this.serviceTypes+"</p></div>"
+"<div class='col-md-8'>"
+"<p>服务类型："+this.serviceTypes+"</p>"
+"<p>机构服务："+this.unitNatureExplain+"</p>"
+"<p>综合评价：<img src='${ctx}/site/img/WX.png'>"
+"<img src='${ctx}/site/img/WX.png'>"
+"<img src='${ctx}/site/img/WX.png'>"
+"<img src='${ctx}/site/img/WX.png'>"
+"<img src='${ctx}/site/img/WX.png'></p>"
+"</div></div></div>"
);
});
});
}
</script>