Echarts圖表如何實現(xiàn)ajax實現(xiàn)動態(tài)數(shù)據(jù)加載

現(xiàn)在已經(jīng)深夜12點了砸喻,拖著疲憊身體還是寫完這篇簡書吧夜涕,今天用了Echarts實現(xiàn)動態(tài)加載數(shù)據(jù)畜隶,干貨還是要分享給大家的


自己確實有點low了壁肋,破東西搞了一個小時,之前也一直在用這個代箭,但是都是給的死數(shù)據(jù)墩划,這次哥們后臺需要圖標(biāo)統(tǒng)計,數(shù)據(jù)都是實時更新的嗡综,叫小搞了一下

首先把echarts的插件引入乙帮,根據(jù)官方文檔都有現(xiàn)成的demo,話不多說极景,直接進入主題

剛開始天真的以為察净,只要把數(shù)據(jù)從ajax中獲取出來,組成數(shù)組就可以放進去了盼樟,就比如下面這么傻的寫


事實證明氢卡,我想的太簡單了,并沒有什么卵用

真正的正確寫法是在ajax獲取正確的數(shù)據(jù)后晨缴,在success的方法里译秦,直接setOption,把需要加入全局數(shù)據(jù)加入進去击碗,當(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();

}

})

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末甲馋,一起剝皮案震驚了整個濱河市埂奈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌定躏,老刑警劉巖挥转,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異共屈,居然都是意外死亡绑谣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門拗引,熙熙樓的掌柜王于貴愁眉苦臉地迎上來借宵,“玉大人,你說我怎么就攤上這事矾削∪烂担” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵哼凯,是天一觀的道長欲间。 經(jīng)常有香客問我,道長断部,這世上最難降的妖魔是什么猎贴? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮蝴光,結(jié)果婚禮上她渴,老公的妹妹穿的比我還像新娘。我一直安慰自己蔑祟,他們只是感情好趁耗,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疆虚,像睡著了一般苛败。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上径簿,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天罢屈,我揣著相機與錄音,去河邊找鬼牍帚。 笑死儡遮,一個胖子當(dāng)著我的面吹牛乳蛾,可吹牛的內(nèi)容都是我干的暗赶。 我是一名探鬼主播鄙币,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蹂随!你這毒婦竟也來了十嘿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤岳锁,失蹤者是張志新(化名)和其女友劉穎绩衷,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體激率,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡咳燕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了乒躺。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片招盲。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖嘉冒,靈堂內(nèi)的尸體忽然破棺而出曹货,到底是詐尸還是另有隱情,我是刑警寧澤讳推,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布顶籽,位于F島的核電站,受9級特大地震影響银觅,放射性物質(zhì)發(fā)生泄漏礼饱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一究驴、第九天 我趴在偏房一處隱蔽的房頂上張望慨仿。 院中可真熱鬧,春花似錦纳胧、人聲如沸镰吆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽万皿。三九已至,卻和暖如春核行,著一層夾襖步出監(jiān)牢的瞬間牢硅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工芝雪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留减余,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓惩系,卻偏偏與公主長得像位岔,于是被迫代替她去往敵國和親如筛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 《ijs》速成開發(fā)手冊3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 5,118評論 0 7
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理抒抬,服務(wù)發(fā)現(xiàn)杨刨,斷路器,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法擦剑,類相關(guān)的語法妖胀,內(nèi)部類的語法,繼承相關(guān)的語法惠勒,異常的語法赚抡,線程的語...
    子非魚_t_閱讀 31,622評論 18 399
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile麗語閱讀 3,830評論 0 6
  • 小娃不好對付了 鏡頭下是這樣的:餐桌上殘羹剩飯、一片狼藉纠屋。我和他爸都速戰(zhàn)速決地吃完了晚餐怕品,只剩...
    齊格格閱讀 416評論 0 3