echarts异步加载多组数据

说明

1. 创建的maven项目
2. 需要echarts.js和jquery.js echarts.min.js jquery-3.2.1.min.js

官网介绍

Echarts官网链接

初步教程

初步教程，搭建环境

异步加载

1. 异步加载案例有加载一组数据
2. 加载两组数据
3. 加载饼图数据

加载一组数据

前台处理

首先看加载条形图的数据结构

option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};;

可以看出，我们主要给的数据是xAxis中的data 以及series中的数据
根据官网的试例，我们先搭好结构，发送请求到后台，拿到数据后填充即可！
先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。（官网原话）

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
   
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

在异步加载数据那里我们可以更改成发送ajax的格式请求

 $.ajax({
 type : "post",
 async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
 url : "getData.action",    //请求发送
 dataType : "json",        //返回数据形式为json
 success : function(result) {
   
    // alert(result.categories);
    // alert(result.data);
     //请求成功时执行该函数内容，result即为服务器返回的json对象
     if (result) {
         var categories = result.categories;
          for(var i=0;i<categories.length;i++){    
              //alert( categories[i] );
              categorie.push( categories[i] );    //挨个取出类别并填入类别数组
           }
          var datas = result.data;
          for(var i=0;i<datas.length;i++){   
              data.push( datas[i] );  //挨个取出销量并填入销量数组  
          }
          myChart.hideLoading();    //隐藏加载动画
          myChart.setOption({        //加载数据图表
              xAxis: {
                  data: categorie
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '销量',
                  data: data
              }]
          });
     }
},
 error : function(errorMsg) {
    
     //请求失败时执行该函数
     alert("图表请求数据失败!");
     myChart.hideLoading();
 }
})

我们先看看服务器返回的数据结构，返回的数据是result

返回的数据是result含有一个categories数组和data数组，所以拿到数据后处理的核心代码就是这一段

var categories = result.categories;
for(var i=0;i<categories.length;i++){    
     //alert( categories[i] );
     categorie.push( categories[i] );    //挨个取出类别并填入类别数组
}
var datas = result.data;
for(var i=0;i<datas.length;i++){   
    data.push( datas[i] );  //挨个取出销量并填入销量数组  
}

拿到数据后再填充到之前创建好的结构。

myChart.setOption({        //加载数据图表
  xAxis: {
      data: categorie
  },
  series: [{
      // 根据名字对应到相应的系列
      name: '销量',
      data: data
  }]
});

现在前台OK了，后台处理！

后台处理

因为需要传到前台的数据格式为json,这里使用Google的Gson包

提示一下哦，很多初学者找jar包，这个要积分，那个要积分，很痛苦的，如果你需要一些包可以来这里搜索

Maven仓库