現(xiàn)在已經(jīng)深夜12點(diǎn)了，拖著疲憊身體還是寫完這篇簡書吧，今天用了Echarts實現(xiàn)動態(tài)加載數(shù)據(jù)，干貨還是要分享給大家的
自己確實有點(diǎn)low了，破東西搞了一個小時，之前也一直在用這個，但是都是給的死數(shù)據(jù)，這次哥們后臺需要圖標(biāo)統(tǒng)計，數(shù)據(jù)都是實時更新的，叫小搞了一下
首先把echarts的插件引入，根據(jù)官方文檔都有現(xiàn)成的demo，話不多說，直接進(jìn)入主題
剛開始天真的以為，只要把數(shù)據(jù)從ajax中獲取出來，組成數(shù)組就可以放進(jìn)去了，就比如下面這么傻的寫
事實證明，我想的太簡單了，并沒有什么卵用
真正的正確寫法是在ajax獲取正確的數(shù)據(jù)后，在success的方法里，直接setOption，把需要加入全局?jǐn)?shù)據(jù)加入進(jìn)去，當(dāng)然，在獲取數(shù)據(jù)前，把需要加入活的數(shù)據(jù)的屬性賦值為空，下面是完整代碼，粘貼上去睡覺覺了，晚安！
var myChart = echarts.init(document.getElementById('main'));
// 顯示標(biāo)題，圖例和空的坐標(biāo)軸
myChart.setOption({
title: {
text: '施工隊工時統(tǒng)計'
},
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:['工時','臨時總工時','項目數(shù)']
},
xAxis: {
data: []
},
yAxis: [
{
type: 'value',
name: '工時',
min: 0,
max: '',
interval:30,
axisLabel: {
formatter: '{value} 天'
}
},
{
type: 'value',
name: '項目數(shù)',
min: 0,
max: '',
interval: 30,
axisLabel: {
formatter: '{value} 個'
}
}
],
series: [
{
name:'工時',
type:'bar',
// ? ? ? ? ? ? data:projectshu
data:[]
},
{
name:'臨時總工時',
type:'bar',
// ? ? ? ? ? ? data:zgsn
data:[]
},
{
name:'項目數(shù)',
type:'line',
yAxisIndex: 1,
// ? ? ? ? ? ? data:lsgsn
data:[]
}
]
});
myChart.showLoading();? ? //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
//? ? ? var names=[];? ? //類別數(shù)組（實際用來盛放X軸坐標(biāo)值）
//? ? ? var nums=[];? ? //銷量數(shù)組（實際用來盛放Y坐標(biāo)值）
var projectshu=[];
var zgsn=[];
var lsgsn=[];
var team_name=[];
$.ajax({
type : "post",
async : true,? ? ? ? ? ? //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
url : "{:U('Tongji/sgdgstongji')}",? ? //請求發(fā)送到TestServlet處
data : {},
dataType : "json",? ? ? ? //返回數(shù)據(jù)形式為json
success : function(result) {
//請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對象
if (result) {
for(var i=0;i
team_name.push(result[i].team_name);? ? //挨個取出銷量并填入銷量數(shù)組
}
var maxpro =0;
var maxpros;
for(var i=0;i
projectshu.push(result[i].project_num);? ? //挨個取出類別并填入類別數(shù)組
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);? ? //挨個取出銷量并填入銷量數(shù)組
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);? ? //挨個取出銷量并填入銷量數(shù)組
}
myChart.hideLoading();? ? //隱藏加載動畫
myChart.setOption({? ? ? ? //加載數(shù)據(jù)圖表
xAxis: {
data: team_name
},
yAxis:[
{
name: '工時',
max: max,
interval:maxbei,
},
{
name: '項目數(shù)',
max: maxpro,
interval: maxpros,
}
],
series: [
{
// 根據(jù)名字對應(yīng)到相應(yīng)的系列
name: '工時',
data: zgsn
},
{
// 根據(jù)名字對應(yīng)到相應(yīng)的系列
name: '臨時總工時',
data: lsgsn
},
{
// 根據(jù)名字對應(yīng)到相應(yīng)的系列
name: '項目數(shù)',
data: projectshu
}
]
});
}
},
error : function(errorMsg) {
//請求失敗時執(zhí)行該函數(shù)
alert("圖表請求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
})
