echarts如何通过ajax异步传输数据以及容易遇到的问题介绍

最新推荐文章于 2022-05-02 18:35:24 发布

置顶 Monkey业

最新推荐文章于 2022-05-02 18:35:24 发布

阅读量2.4k

点赞数 1

分类专栏： echart的ajax传输数据文章标签： ajax 异步数据 echarts数据传输

本文链接：https://blog.csdn.net/monymy/article/details/70786931

版权

echart的ajax传输数据专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="pie" style="height:360px;padding-left: 14px"></div>
</body>

<script type="text/javascript">


var pieChart = echarts.init(document.getElementById('pie'));
option = {
title: {
text: '堆叠区域图',
show: false,
},
tooltip : {
trigger: 'axis'
},
legend: {
data: ['1.0','2.0','3.0'],
right:'10%',
textStyle:{
color:'red',
}
},

grid: {
left: '20%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis : [
{
type : 'category',
show : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
show : false
}
],
series : [
{
name:'1.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:[100, 200, 101, 134, 90, 230, 210]
},
{
name:'2.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:[200, 300, 191, 234, 290, 330, 310]
},
{
name:'3.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:[700, 500, 301, 334, 390, 330, 320]
},

]
};
pieChart.setOption(option);




//①你需要动态添加几种数据(xAxis的数据 /yAxis的数据 / legend的数据/以及你图形定义的data)，我在这里就先添加两种（xAxis和图形中的数据）xAxis定义X。就定义几个变量
//因为本图中图形有三种数据，所以定义三个P的变量P1 P2 P3;
var X = [];
var P1 = [];
var P2 = [];
var P3 = [];

//③通过ajax异步到后台取数据然后加载到你的chart图中
$(function(){
$.ajax({
url : "<%=basePath%>BkBarSvl",
type : "post",
dataType :"json",
async : true,
//这里取回的数据就是你自己定义的数据。
success : function(pies){
$.each(pies, function(i,pie){
X.push(pie.属性1);
P1.push(pie.属性2);
P2.push(pie.属性3);
P3.push(pie.属性4);
});
//ajax加载成功后跳转bar函数加载charts图，介绍下这里为什么要给pieChart造一个函数bar，因为上面的ajax异步传输消息时很容易出现数据没加载完就运行下一步，所以这里使用添加bar()方法的方式解决这种问题。

//没有遇到类似问题的可以尝试下去除这个方法直接加载的方式看看结果。alert一下。

//ajax遇到这种问题还有一种解决方式就是把异步改成同步async：false 但是那样ajax传输就丢失了它的意义。

bar();
}
})
});
function bar(){
var pieChart = echarts.init(document.getElementById('pie'));
option = {
title: {
text: '堆叠区域图',
show: false,
},
tooltip : {
trigger: 'axis'
},
legend: {
data: ['1.0','2.0','3.0'],
right:'10%',
textStyle:{
color:'red',
}
},

grid: {
left: '20%',
right: '10%',
bottom: '10%',
containLabel: true
},
//②将需要更换的数据data后面的数据修改成你定义的数组
xAxis : [
{
type : 'category',
show : false,
//['周一','周二','周三','周四','周五','周六','周日'] 改为
data : X
}
],
yAxis : [
{
type : 'value',
show : false
}
],
series : [
{
//[100, 200, 101, 134, 90, 230, 210] 改为 P1
name:'1.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:P1
},
{
//[200, 300, 191, 234, 290, 330, 310] 改为Z2
name:'2.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:P2
},
//[700, 500, 301, 334, 390, 330, 320] 改为Z3
name:'3.0',
type:'line',
stack: '总量',
symbol:'circle',
areaStyle: {normal: {}},
data:P3
},

]
};
stackChart.setOption(option);
}

</script>
</html>

Monkey业

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts如何通过ajax异步传输数据以及容易遇到的问题介绍

$.ajax({ url : "<%=basePath%>BkBarSvl", type : "post", dataType :"json", async : true, //这里取回的数据就是你自己定义的数据。 success : function(pies){ $.each(pies, function(i,pie){ X.push(pie.属性1); P1.push(pie.属性2);
复制链接

扫一扫