echarts中数据的循环

echats中的数据循环

echarts中的xAxis中的data和series中的data都是数组格式、都是数组格式、都是数组格式(重要事情说三遍),只有知道需要什么类型的数据才能数据异步加载中创建出与之对应的数据。

第一步、第二步没有什么不同,下面以柱状图的数据循环为例

第一步初始化

var myChart = echarts.init(document.getElementById(Chartid));

第二步、设置标题、图例、空的坐标

myChart.setOption({
					title:{
						text:title
					},
					tooltip: {},
					legend:{
						orient:'vertical',
						x:'right',
						data:['版本A','版本B']
					},
					xAxis:{
						data:[]
					},
					yAxis: {},
					series:[
						{
						name:'版本A',
						type:'bar',
						data:[]
						},
						{
						name:'版本B',
						type:'bar',
						data:[]
						}]
				});

第三步、数据异步加载,数据循环

$.get(url).done(function(data){
					var obj = JSON.parse(data);
					var sxAxis=[];
					var aseries=[];
					var bseries=[];
                                        //坐标和数据都push到数组中
                                      for(var i=0;i<obj.length;i++){
						sxAxis.push(
							obj[i].option//
						);
						aseries.push(
							obj[i].edita
						);
						bseries.push(
							obj[i].editb
						);
					}
					
					myChart.setOption({
							xAxis:{
								type : 'category',
								data:sxAxis//使用数组
							},
							series:[{
									name:'版本A',
									data:aseries //使用数组
									},
									{
									name:'版本B',
									data:bseries //使用数组
									}]
						});
				});


  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值