echarts异步加载多组数据-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

echarts异步加载多组数据

简介: 说明 创建的maven项目 需要echarts.js和jquery.js 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仓库

Gson包下载地址

注释蛮清楚了,废话不多说,直接代码~

package com.wy.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * 一组数据异步加载请求处理
 * @author 沪旦铭
 *
 */
public class EchartsOneServlet extends HttpServlet {

    private static final long serialVersionUID = 694540269429637504L;

    //重写POST方法
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Gson gson = new Gson();
        //传入前台的数据
        Map<String,Object> map = new HashMap<String,Object>();
//        categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
//        data: [5, 20, 36, 10, 10, 20]
        List<String> categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子");  //new ArrayList<String>();
        List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20); //new ArrayList<Integer>();

        map.put("categories", categories);
        map.put("data", data);
        //设置返回类型以及编码编码,否则中文会出现乱码情况
        resp.setContentType("application/json;charset=UTF-8");
        //传到前台
        PrintWriter out = resp.getWriter();
        out.print(  gson.toJson(map) );
        out.flush();
        out.close();
    }
}

多组数据

多组数据和一组数据差不多,主要看所需要的格式

关键就是这一部分

series:[{ 
        name: '销量', //鼠标放在柱状图上显示的文字
        type: 'bar', //柱状图
        data: [5, 20, 36, 10, 10, 20]
    },{
        name: '第二组数据', //鼠标放在柱状图上显示的文字
        type: 'bar', //柱状图
        data: [4, 21, 30, 21, 12, 66]
    }]

前端处理

    <!-- 多组数据异步加载 -->
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main2" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        //初始化echarts
        var myChart2 = echarts.init(document.getElementById('main2'));
         // 显示标题,图例和空的坐标轴
         myChart2.setOption({
                title: {
                    text: '多组数据异步数据加载示例'
                },
                tooltip: {},
                legend: {
                    data:[] //这里也需要填充   '第一组数据','第二组数据'
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '销量', //这个可不用写
                    type: 'bar', //这个可不用写
                    data: []
                }]
         });

         myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画

         var categorie2 = [];    //类别数组(实际用来盛放X轴坐标值)

         $.ajax({
         type : "post",
         async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
         url : "getDataMany.action",    //请求发送
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容,result即为服务器返回的json对象
             if (result) {
                 var categories = result.categories;
                  for(var i=0;i<categories.length;i++){    
                      //alert( categories[i] );
                      categorie2.push( categories[i] );    //挨个取出类别并填入类别数组
                   }
                  var datas = result.data;  //data返回的数值数数值 包括 name type data  
                  var legend = []; // 
                  var series = [];
                  for(var i = 0;i<datas.length;i++){
                      var s = datas[i];
                      //alert( s['name'] );
                      //alert( s['data'] );
                      legend.push(
                         s['name']
                      );
                      series.push({
                          name: s['name'],
                          type: 'bar',
                          data: s['data']
                      });
                  }
                  //alert(series);
                  myChart2.hideLoading();    //隐藏加载动画
                  myChart2.setOption({        //加载数据图表
                      legend:{
                          data: legend
                      },
                      xAxis: {
                          data: categorie2  // X坐标数值
                      },
                      series: series
                  });
             }
        },
         error : function(errorMsg) { //没做出错处理
             //请求失败时执行该函数
             alert("图表请求数据失败!");
             myChart2.hideLoading();
         }
    })
    </script>

后台处理

后台给好数据结构即可

package com.wy.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * 多组数据异步加载请求处理
 * @author 沪旦铭
 *
 */
public class EchartsManyServlet extends HttpServlet {

    private static final long serialVersionUID = -360655681801936072L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Gson gson = new Gson();
        //转载数据
        Map<String,Object> map = new HashMap<String,Object>();
        List<String> categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"); //用来填充X坐标

        //用来存取多个数据
        List<Object> manyList = new ArrayList<Object>();

        //第一组数据
        //name type data 
        Map<String,Object> many = new HashMap<String,Object>();
        many.put("name", "第一组数据");
        many.put("type", "bar");
        //第一组数据
        List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20); 
        many.put("data", data);
        //装入
        manyList.add(many);
        //第二组数据
        Map<String,Object> many2 = new HashMap<String,Object>();
        many2.put("name", "第二组数据");
        many2.put("type", "bar");
        //第一组数据
        List<Integer> data2 = Arrays.asList(4, 10, 26, 15, 18, 20); 
        many2.put("data", data2);
        //装入
        manyList.add(many2);

        map.put("categories", categories);
        map.put("data", manyList);
        //设置返回类型以及编码编码,否则中文会出现乱码情况
        resp.setContentType("application/json;charset=UTF-8");
        //传到前台
        PrintWriter out = resp.getWriter();
        out.print( gson.toJson(map) );
        out.flush();
        out.close();
    }
}

饼图异步加载

其实饼图和条形图类似,直接上代码吧

前端处理

    <!-- 饼图异步加载 -->
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main3" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
         //初始化echarts
         var myChart3 = echarts.init(document.getElementById('main3'));
          // 显示标题,图例和空的坐标轴
          myChart3.setOption({
                backgroundColor: '#FFFFFF', //设置背景颜色  #FFFFFF   2c343c
                title: {
                    text: '饼图异步加载试列',
                    x: 'center'   //居中显示
                },
                tooltip: {
                    show: true
                },
                legend: {
                    data:[] //这里也需要填充   '第一组数据','第二组数据'
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '', 
                    type: 'pie', 
                    radius: '55%', //半径 可调整饼图大小
                    data: [

                    ]
                }]
          });

         myChart3.showLoading();    //数据加载完之前先显示一段简单的loading动画
         //发送请求
         $.ajax({
         type : "post",
         async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
         url : "getPieData.action",    //请求发送
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容,result即为服务器返回的json对象
             if (result) {
                  var series = [];
                  var legend = []; //
                  for(var i=0;i<result.length;i++){
                      var res = result[i];
                     // alert( res.value );
                     legend.push( res.name );

                      series.push({
                         value: res.value,
                         name: res.name
                      });
                  }

                  myChart3.hideLoading();    //隐藏加载动画
                  myChart3.setOption({        //加载数据图表
                      tooltip:{   //设置鼠标放在图形上提示的数据格式   可不设置tooltip
                          trigger: 'item',
                          formatter: "{a}<br/>{b} : {c}({d}%)"
                      },
                      xAxis: {  //隐藏X轴
                          show: false   
                      },
                      yAxis: {  //隐藏Y轴
                          show: false
                      },
                      legend:{
                          orient: 'vertical',
                          left: 'left',
                          data: legend
                      },
                      series: {
                          name: '访问来源', 
                          type: 'pie',  //这个类型不能少,否则js会报错
                          data: series
                      }
                  });
             }
        },
         error : function(errorMsg) { //没做出错处理
                 //请求失败时执行该函数
                 alert("图表请求数据失败!");
                 myChart3.hideLoading();
            }
        })
    </script>

后台处理

package com.wy.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

public class EchartsPieServlet extends HttpServlet {

    private static final long serialVersionUID = 6511473073444195224L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          //前台所需格式
//        {value:235, name:'视频广告'},
//        {value:274, name:'联盟广告'},
//        {value:310, name:'邮件营销'},
//        {value:335, name:'直接访问'},
//        {value:400, name:'搜索引擎'}
        Gson gson = new Gson();
        List<Object> list = new ArrayList<Object>();

        //数据库查询可循环处理

        Map<String,Object> map = new HashMap<String,Object>();
        map.put("value", 235);
        map.put("name", "视频广告");
        list.add(map);
        Map<String,Object> map2 = new HashMap<String,Object>();
        map2.put("value", 274);
        map2.put("name", "联盟广告");
        list.add(map2);
        Map<String,Object> map3 = new HashMap<String,Object>();
        map3.put("value", 310);
        map3.put("name", "邮件营销");
        list.add(map3);
        Map<String,Object> map4 = new HashMap<String,Object>();
        map4.put("value", 335);
        map4.put("name", "直接访问");
        list.add(map4);
        Map<String,Object> map5 = new HashMap<String,Object>();
        map5.put("value", 400);
        map5.put("name", "搜索引擎");
        list.add(map5);

        //设置相应contentType
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        out.println(  gson.toJson(list) );
        out.flush();
        out.close();
    }
}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance   
    http://www.springmodules.org/schema/cache/springmodules-cache.xsd 
    http://www.springmodules.org/schema/cache/springmodules-ehcache.xsd"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    metadata-complete="true" version="3.0">

  <display-name>Archetype Created Web Application</display-name>

  <!-- 配置一组数据处理 -->
  <servlet>
        <servlet-name>echartsOneServlet</servlet-name>
        <servlet-class>com.wy.servlets.EchartsOneServlet</servlet-class>
  </servlet>
  <!-- 配置多组数据处理 -->
  <servlet>
        <servlet-name>echartsManyServlet</servlet-name>
        <servlet-class>com.wy.servlets.EchartsManyServlet</servlet-class>
  </servlet>

  <!-- 饼图 -->
  <servlet>
        <servlet-name>echartsPieServlet</servlet-name>
        <servlet-class>com.wy.servlets.EchartsPieServlet</servlet-class>
  </servlet>

  <servlet-mapping>
        <servlet-name>echartsOneServlet</servlet-name>
        <url-pattern>/getData.action</url-pattern>
  </servlet-mapping>

  <servlet-mapping>
        <servlet-name>echartsManyServlet</servlet-name>
        <url-pattern>/getDataMany.action</url-pattern>
  </servlet-mapping>


  <servlet-mapping>
        <servlet-name>echartsPieServlet</servlet-name>
        <url-pattern>/getPieData.action</url-pattern>
  </servlet-mapping>

</web-app>

整个项目请移步

Echarts.7z


效果图

这里写图片描述

你猜,com.wy这个wy是什么意思呢…

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: