在做项目中遇到了一个 echarts 异步加载数据的填充, 首先, 查看官方文档示例, 了解相关属性之后, 再去了解异步请求的相关属性, 之后在异步中进行定义横坐标和值数组定义, 通过遍历获取 result 的值存放在定义的数组中, 最后存放在 data 下便实现异步加载获取数据, 以下是示例:
- function test(){
- var myChart = echarts.init(document.getElementById('main'));
- // 显示标题, 图例和空的坐标轴
- myChart.setOption({
- title: {
- text: '预计生产产量'
- },
- tooltip: {},
- toolbox: {
- feature: {
- dataView: {show: true, readOnly: false},
- magicType: {show: true, type: ['line', 'bar']},
- restore: {show: true},
- saveAsImage: {show: true}
- }
- },
- legend: {
- data:['数量']
- },
- xAxis: {
- data: []
- },
- yAxis: {},
- series: [{
- name: '数量',
- type: 'bar',
- data: []
- }]
- });
- myChart.showLoading(); // 数据加载完之前先显示一段简单的 loading 动画
- var names=[]; // 类别数组 (实际用来盛放 X 轴坐标值)
- var nums=[]; // 销量数组 (实际用来盛放 Y 坐标值)
- $.Ajax({
- type : "get",
- async : true, // 异步请求 (同步请求将会锁住浏览器, 用户其他操作必须等待请求完成才可以执行)
- url : "http://localhost:8080/wisdomeet/a/real/realProgress/realList", // 请求发送到 TestServlet 处
- success : function(result) {
- // 请求成功时执行该函数内容, result 即为服务器返回的 JSON 对象
- if (result) {
- for(var i=0;i<result.length;i++){
- names.push(result[i].process.name); // 挨个取出类别并填入类别数组
- }
- for(var i=0;i<result.length;i++){
- // nums.push(result[i].productionArrangement.number); // 挨个取出销量并填入销量数组 daliy
- nums.push(result[i].productionArrangement.daliy);
- }
- myChart.hideLoading(); // 隐藏加载动画
- myChart.setOption({ // 加载数据图表
- xAxis: {
- data: names
- },
- series: [{
- // 根据名字对应到相应的系列
- name: '数量',
- data: nums
- }]
- });
- }
- },
- error : function(errorMsg) {
- // 请求失败时执行该函数
- alert("图表请求数据失败!");
- myChart.hideLoading();
- }
- });
- };
后台接口示例:
- @ResponseBody
- @RequestMapping(value="realList")
- public List<RealProgress> realList(RealProgress realProgress, HttpServletRequest request, HttpServletResponse response, Model model) {
- List<RealProgress> realList = realProgressService.findList(realProgress);
- return realList;
- }
来源: http://www.bubuko.com/infodetail-3090263.html