现在已经深夜12点了，拖着疲惫身体还是写完这篇简书吧，今天用了Echarts实现动态加载数据，干货还是要分享给大家的
自己确实有点low了，破东西搞了一个小时，之前也一直在用这个，但是都是给的死数据，这次哥们后台需要图标统计，数据都是实时更新的，叫小搞了一下
首先把echarts的插件引入，根据官方文档都有现成的demo，话不多说，直接进入主题
刚开始天真的以为，只要把数据从ajax中获取出来，组成数组就可以放进去了，就比如下面这么傻的写
事实证明，我想的太简单了，并没有什么卵用
真正的正确写法是在ajax获取正确的数据后，在success的方法里，直接setOption，把需要加入全局数据加入进去，当然，在获取数据前，把需要加入活的数据的属性赋值为空，下面是完整代码，粘贴上去睡觉觉了，晚安！
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '施工队工时统计'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['工时','临时总工时','项目数']
},
xAxis: {
data: []
},
yAxis: [
{
type: 'value',
name: '工时',
min: 0,
max: '',
interval:30,
axisLabel: {
formatter: '{value} 天'
}
},
{
type: 'value',
name: '项目数',
min: 0,
max: '',
interval: 30,
axisLabel: {
formatter: '{value} 个'
}
}
],
series: [
{
name:'工时',
type:'bar',
// data:projectshu
data:[]
},
{
name:'临时总工时',
type:'bar',
// data:zgsn
data:[]
},
{
name:'项目数',
type:'line',
yAxisIndex: 1,
// data:lsgsn
data:[]
}
]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
// var names=[]; //类别数组（实际用来盛放X轴坐标值）
// var nums=[]; //销量数组（实际用来盛放Y坐标值）
var projectshu=[];
var zgsn=[];
var lsgsn=[];
var team_name=[];
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "{:U('Tongji/sgdgstongji')}", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i
team_name.push(result[i].team_name); //挨个取出销量并填入销量数组
}
var maxpro =0;
var maxpros;
for(var i=0;i
projectshu.push(result[i].project_num); //挨个取出类别并填入类别数组
if(result[i].project_num>max){
maxpro=result[i].project_num
}
}
maxpros=parseInt(maxpro/10);
if(maxpros<=0){
maxpros=1;
}
var max =0;
var maxbei;
for(var i=0;i
zgsn.push(result[i].zgs); //挨个取出销量并填入销量数组
if(result[i].zgs>max){
max=result[i].zgs
}
}
maxbei=parseInt(max/10);
if(maxbei<=0){
maxbei=1;
}
for(var i=0;i
lsgsn.push(result[i].lsgs); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: team_name
},
yAxis:[
{
name: '工时',
max: max,
interval:maxbei,
},
{
name: '项目数',
max: maxpro,
interval: maxpros,
}
],
series: [
{
// 根据名字对应到相应的系列
name: '工时',
data: zgsn
},
{
// 根据名字对应到相应的系列
name: '临时总工时',
data: lsgsn
},
{
// 根据名字对应到相应的系列
name: '项目数',
data: projectshu
}
]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
网友评论