asp.net如何把后台数据传到前台echarts.js中并异步渲染

这个很简单啊，你如果需要实时更新，那就需要一个定时器+一个异步ajax请求到json数据即可 echartsjs 这个不用我说了把，只要有json数据就可以绑定了，柱状图，折线图什么的都有api可以看，百度的echarts很简单的

1、要把echarts从后台获取的数据，首先选中一列数据，然后点击页面上方的“数据”。

2、在数据菜单栏下，点击右边的“分列”选项。

3、在分列的第1步里，勾选“固定宽度”，然后点击“下一步”。

4、在分列的第2步里，在要分列的地方建立分列线，点击一下鼠标左键则可建立分列线，然后点击“下一步”。

5、在分列的第3步里，格式默认常规则可，然后点击“完成”。

6、则可成功的将该列数据分成两组了。

//使用Ajax请求你的servlet或者controller或者action 然后获取数据

$get('Query_RealTimeServlet')done(function jzdata(result) {

                        //有可能出现没转换成功的json数据 再转换一次

var json = JSONparse(result);

//用数组存储数据 我这边有三个

//xdata 是X轴的数据

// ldata rdata是表中的两条折线

var xdata = new Array();

var ldata = new Array();

var rdata = new Array();

//循环 存入数组

for (var i = 0; i < jsonlength; i++) {

var timestr = json[i]updatetime;

xdatapush(timestrsubstr(11));

ldatapush(json[i]left_torque);

rdatapush(json[i]right_torque);

}

//将数组中的数据存放

torque_chartsetOption({

xAxis : {

data : xdata

},

series : [

{

name : '左轮',

data : ldata

},

{

name : '右轮',

data : rdata

}

]

});

});

//这一块只是Ajax的请求存放数据 前边你还得自己设置你的图表样式 比如下边的

//js是我存放JavaScript的文件夹名称 你用你自己的

<script type="text/javascript" src="js/jquery-321minjs"></script>

<script src="js/echartsjs"></script>

<script src="js/esljs"></script>

//初始化 XXXecharts图

var XXX= echartsinit(documentgetElementById("你要放置echarts图的DIV的ID 这个DIV必须有宽高"));

//XXX图的    配置项

XXXsetOption({

//设置标题

title : {

text : '自己起个标题',

textStyle : {

color : '#FFFFFF',

fontSize : 20,

}

},

//设置图例组件

legend : {

left : '40%',

top : '10%',

data : [ 'L', 'R' ]

},

//设置X轴

xAxis : {

name : 'time',

nameTextStyle : {

color : '#FFFFFF'

},

type : 'category',

//名字与坐标轴的距离

nameGap : '5',

//ajax获取时间

data : []

},

//设置Y轴

yAxis : {

name : 'a',

nameTextStyle : {

color : '#FFFFFF'

},

splitLine : {

show : false,

}

},

//设置图表类型

series : [

//第一条线 L

{

type : 'line',

name : 'L',

itemStyle : {

normal : {

color : '#1F77D1',

}

},

lineStyle : {

normal : {

color : '#1F77D1',

}

},

data : []

},

//第二条线 R

{

type : 'line',

name : 'R',

itemStyle : {

normal : {

color : '#D35321',

}

},

lineStyle : {

normal : {

color : '#D35321',

}

},

data : []

}

]

});

    //补充 Ajax是在设置完图表之后的  之后的  之后的

    设置定时请求 每隔1000 (1秒)请求一次 视你的数据上传频率为准

    setInterval(function xxx(), 1000);

以上就是关于asp.net如何把后台数据传到前台echarts.js中并异步渲染全部的内容，包括:asp.net如何把后台数据传到前台echarts.js中并异步渲染、echarts从后台获取的数据怎么分成两组、怎么样让ECharts从后台获取数据并展示等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！