echarts如何通过ajax异步传输数据以及容易遇到的问题介绍
来源:互联网 发布:sai软件绘画电脑版 编辑:程序博客网 时间:2024/06/14 19:27
<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()方法的方式解决这种问题。
}
})
});
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>
<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>
1 0
- echarts如何通过ajax异步传输数据以及容易遇到的问题介绍
- AJAX 异步传输数据的问题
- 利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- ajax异步传输问题
- ajax的异步传输
- 解决ajax异步传输数据,return返回为undefined的问题
- 解决ajax异步传输数据,return返回为undefined的问题
- ajax传输json数据遇到不执行success方法也不报错的问题
- Echarts图表通过Ajax动态更新数据
- Echarts通过Ajax实现动态数据加载
- 初学echarts的excel数据导入遇到的小问题
- Ajax异步传输的使用
- echarts遇到的一些问题。
- ajax异步传输中的乱码问题
- 使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;
- Android activity和fragment异步传输数据的问题
- Echarts扩展之ajax异步加载tooltip数据
- 人工智能学习推荐(1)
- zoj 2760 How Many Shortest Path floyd+最大流+处理的技巧
- 【Python】 Missing parentheses in call to 'print'
- npm换源指令
- SQL语句创建一个表
- echarts如何通过ajax异步传输数据以及容易遇到的问题介绍
- 学习笔记---枚举类型、联合体、自定义类型
- jsp核心标签库详情例子
- 杨冰之:数据基因与政务大数据发展浅见
- 如何使用Junit进行单元测试
- Android emoji显示
- ffmpeg 编码生成mp4文件大小 码率控制
- 读《java编程思想》
- Git获取远端分支