最近做了一个项目需要用到echarts制作表图，然后就自学了一些，下面是使用echarts动态获取数据，这里我是用ajax向后台去数据库获取的数据
效果如下：
当点击查询时：
下面就是用代码来呈现怎样在事件刷选中异步刷新数据
这是前端的数据：
- --所有-- 部门1 部门2 部门3 部门4
<li style="width: 90px;">
// 下拉框选择事件：
<button type="button" class="btn_search"
onclick="search_flight1()">
<i class="icon-search"></i>查询
</button>
</li>
<li style="width:130px;">
<button type="button" onclick="warning()" class="btn-warning btn"> 打印图表数据</button>
</li>
</ul>
</div>
</form>
</div>
<div style="margin-top: 10px;">
<p
style="display: inline-block; width: 50%; font-size: 16px; font-weight: bolder; line-height: 30px; margin-bottom: 20px; float: left;">
用户总数：<span style="color: #06C; font-style: italic;">allAdmin().rows</span>
<p>
<p
style="display: inline-block; width: 50%; font-size: 16px; font-weight: bolder; line-height: 30px; margin-bottom: 20px;">
<span style="color: #06C; font-style: italic;"></span>
</p>
<!-- 为ECharts准备一个具备大小（宽高）的Dom 用户性别统计 -->
<div id="main1"
style="height: 300px; overflow: hidden; width: 50%; overflow: auto; float: left;"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom 用户年龄男女比例 -->
<div id="main2"
style="height: 300px; overflow: hidden; width: 50%; overflow: auto; float: left;"></div>
</div>
</div>
表格展示：
<script type="text/javascript">
var myChart1;
var test=10
//路径配置
require.config({
paths : {
echarts : './assets/dist'
}
});
require([ 'echarts', 'echarts/chart/pie', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/funnel' ], function(ec) {
//获取容器的id并赋值给变量myChart
myChart1 = ec.init(document.getElementById('main1'));
option1 = {
title : {
text : '用户性别统计',
subtext : '',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : [ '女', '男' ]
},
toolbox : {
show : false,
},
calculable : true,
series : [ {
type : 'pie',
data : [ {
value : allAdmin().rownv,
name : '女'
}, {
value : allAdmin().rownan,
name : '男'
},
]
} ]
};
myChart1.setOption(option1);
});
//刷新扇形图
function refreshData1(datas1){
if(!myChart1){
return;
}
//更新数据
var options1 = myChart1.getOption();
options1.series[0].data[0].value = datas1[0];
options1.series[0].data[1].value = datas1[1];
//重新给myChart赋值
myChart1.setOption(options1);
}
</script>
<script>
var myChart;
var test=10
// 路径配置
require.config({
paths : {
echarts : './assets/dist'
}
});
// 使用
require([ 'echarts', 'echarts/chart/bar' ], // 使用柱状图就加载bar模块，按需加载
function(ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('main2'));
var option = {
title : {
text : '用户年龄男女比例',
subtext : ' '
},
color: ['#4cabce', '#e5323e'],
tooltip : {
trigger : 'axis'
},
calculable : true,
xAxis : [ {
type : 'category',
axisTick: {show: false},
data: ['0~15', '15~30', '30~50', '50~70']
} ],
yAxis : [ {
type : 'value'//改设置不显示坐标区域内的y轴分割线
} ],
series : [ {
name : '男',
type : 'bar',
data : [allAdmin().rown15,allAdmin().rown30,allAdmin().rown50,allAdmin().rown100],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '女',
type : 'bar',
data : [allAdmin().row15,allAdmin().row30,allAdmin().row50,allAdmin().row100],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
//刷新树状图
function refreshData(data){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data[0];
option.series[1].data = data[1];
//重新给myChart赋值
myChart.setOption(option);
}
//查询点击事件
search_flight1(){
//刷新树状图
var data1=new Array(allAdmin().rown15,allAdmin().rown30,allAdmin().rown50,allAdmin().rown100);
var data2=new Array(allAdmin().row15,allAdmin().row30,allAdmin().row50,allAdmin().row100);
var data=new Array(data1,data2);
refreshData(data);
//刷新扇形图
var datas1=new Array(allAdmin().rownv,allAdmin().rownan);
refreshData1(datas1);
}
//向后台action获取数据
function allAdmin() {
var dat;
$.ajax({
url :‘adminAction.action',
data : {
'methodName' : 'queryAdmin',
'post':$('#post').val()
},
dataType : 'json',
type : 'post',
async : false,
success : function(data) {
dat = data;
}
});
return dat;
}
</script>