ajax+echarts图表

来源：互联网发布：淘宝收藏量编辑：程序博客网时间：2024/06/08 07:11

echarts图表经常需要ajax请求刷新，以下为使用实例：

在向图表option传递数据时，要使用函数传参的形式。

varunits=[];

varcap=[];

functionreChanNeng(){

$.ajax({

type :"post",

async :true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

url :"UnitCNservlet", //请求发送到UnitCNservlet处

data : {},

dataType :"json", //返回数据形式为json

success :function(result) {

for(vari=0; i<result.length; i++)

{

switch(result[i].UNIT){

case'0101':units[i]='单元一';break;

case'0102':units[i]='单元二';break;

case'0103':units[i]='单元三';break;

case'0104':units[i]='单元四';break;

case'0105':units[i]='单元五';break;

case'0106':units[i]='单元六';break;

}

cap[i]=(result[i].CAP_SCORE);

}

setOption(units,cap);//将取得数据传递给echarts

error :function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

}

});

}

varchanneng=document.getElementById('ChanNeng');

varmyChanNeng=echarts.init(document.getElementById('ChanNeng'));

//需要使用传参的形式

functionsetOption(date1,date2){

varoption={

color: ['#3398DB'],

title : {

text:'线体产能',

subtext:'数据来自MDS'

tooltip : {

trigger:'axis',

formatter:"{a} <br/>{b} : {c} %"

legend: {

data:['线体产能']

toolbox: {

show :true,

feature : {

dataView : {show:true, readOnly:false},

magicType : {show:true, type: ['line','bar']},

restore : {show:true},

saveAsImage : {show:true}

}

calculable :true,

xAxis : [

{

type :'category',

data:date1

}

yAxis : [

{

type :'value',

}

series : [

{

name:'线体产能',

type:'bar',

data:date2,

barWidth:'50%'

]

};

myChanNeng.setOption(option);

};

阅读全文

0 0