ECharts简单Demo之WEBFORM版本

来源：互联网发布：中国地图编辑软件编辑：程序博客网时间：2024/06/18 13:18

前言

本来今天上午已经快写完了，一个ctrl+w关闭了，草稿箱不知道怎么回事，没有保存O__O “…下午边看LPL比赛又重写一次。

这篇博文应该是在2016年就完成的，因为种种原因耽误了。本来想实现一个数据和图形转换的简单功能，查阅了相关资料，感觉使用百度开发的ECharts比较简单、方便。

ECharts 特性介绍

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
官方效果图：

样例展示

创建一个简单的web工程，前端使用的是HTML

简单入门

demo.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Demo</title><!-- 引入echarts文件 --><script src="js/echarts.js"></script><script src="js/jquery-1.7.2.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px; height: 400px;"></div>    <script type="text/javascript">        alert("1.准备初始化echarts实例");        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title: {                text: 'ECharts 入门示例'            },            tooltip: {},            legend: {                data:['销量']            },            xAxis: {                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };        alert("2.准备指定配置项");        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);        // 相当于 document.ready，{代码}        $(function(){            alert("3.页面加载完毕");        })    </script></body></html>

效果图：
DEMO
分析：

初识化模型
指定配置项（数据、模型均未显示）
页面加载完毕（模型显示、数据未添加显示）

获取后台数据

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Demo</title><script src="js/echarts.js"></script><script src="js/jquery-1.7.2.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 1200px; height: 500px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        var option = {                title : {                    text : '初始化完毕，setOption填入数值'                },                tooltip : {},                legend : {                    data : ['销量']                },                xAxis : {                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                },                yAxis : {},                series : [ {                    name : '销量',                    type : 'bar',                    data : [5, 20, 36, 10, 10, 20]                } ]            };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);        $(function() {            // 商品信息            alert("页面加载完毕，发出数据请求");            var obj = {};            $.ajax({                type : "POST",                url : "http://localhost:8080/ECharts/MyServlet",                data : {},                success : function(data) {                    alert("返回后台数据");                    obj = $.parseJSON(data);                    var numbers = new Array();      // 销售数量                    var goodNames = new Array();    // 商品名称                    var date = new Array();         // 销售日期                    for (var i = 0; i < obj.length; i++) {                        numbers[i] = obj[i].number;                        goodNames[i] = obj[i].goodName;                        date[0] = obj[i].currentDateStr;                    }                    // 指定图表的配置项和数据                    var option = {                        title : {                            text : '初始化完毕，setOption填入数值'                        },                        tooltip : {},                        legend : {                            data : date                        },                        xAxis : {                            data : goodNames                        },                        yAxis : {},                        series : [ {                            name : date[0],                            type : 'bar',                            data : numbers                        } ]                    };                    // 使用刚指定的配置项和数据显示图表。                    myChart.setOption(option);                }            });        })    </script></body></html>

后台逻辑返回数据：

package com.edu.action;import java.io.IOException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.edu.xk.dto.SkuStockWaterDto;import com.edu.xk.model.Util;import com.google.gson.Gson;/** * Servlet implementation class MyServlet */@WebServlet("/MyServlet")public class MyServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @see HttpServlet#HttpServlet()     */    public MyServlet() {        super();    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setCharacterEncoding("utf-8");        List<SkuStockWaterDto> list = Util.getTestData();        Gson gson = new Gson();        try {            Thread.sleep(500L);        } catch (InterruptedException e) {            e.printStackTrace();        }        response.getWriter().append(gson.toJson(list));    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }

效果图：
获取后台数据
分析：

初识化模型，指定配置项，显示模型，不显示数据
页面加载完毕，发出请求
获取后台数据，后台逻辑睡眠0.5秒，返回数据
将获取的数据填充到模型中

loading动画

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Demo</title><script src="js/echarts.js"></script><script src="js/jquery-1.7.2.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px; height: 400px;"></div>    <script type="text/javascript">        var myChart = echarts.init(document.getElementById('main'));        function fetchData(cb) {            // 通过 setTimeout 模拟异步加载            setTimeout(function () {                cb({                    categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],                    data: [5, 20, 36, 10, 10, 20]                });            }, 3000);        }        // 初始 option        option = {            title: {                text: '异步数据加载示例'            },            tooltip: {},            legend: {                data:['销量']            },            xAxis: {                data: []            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: []            }]        };        myChart.setOption(option);        // 设置loading动画        myChart.showLoading();        fetchData(function (data) {            // 隐藏loading动画            myChart.hideLoading();            myChart.setOption({                xAxis: {                    data: data.categories                },                series: [{                    // 根据名字对应到相应的系列                    name: '销量',                    data: data.data                }]            });        });    </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

效果图：
loading动画
loading后台获取数据:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Demo</title><script src="js/echarts.js"></script><script src="js/jquery-1.7.2.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px; height: 400px;"></div>    <script type="text/javascript">        var myChart = echarts.init(document.getElementById('main'));        myChart.setOption({            title: {                text: '异步数据加载示例'            },            tooltip: {},            legend: {                data:['销量']            },            xAxis: {                data: []            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: []            }]        })        myChart.showLoading();      // 加载图标        $.get('http://localhost:8080/ECharts/MyServlet').done(function(data) {            obj = $.parseJSON(data);            myChart.hideLoading();  //  隐藏图标                var numbers = new Array();      // 销售数量            var goodNames = new Array();    // 商品名称            var date = new Array();         // 销售日期            for (var i = 0; i < obj.length; i++) {                numbers[i] = obj[i].number;                goodNames[i] = obj[i].goodName;                date[0] = obj[i].currentDateStr;            }            myChart.setOption({                title : {                    text : '异步数据加载示例'                },                tooltip : {},                legend : {                    data : date                },                xAxis : {                    data : goodNames                },                yAxis : {},                series : [ {                    name : date,                    type : 'bar',                    data : numbers                } ]            });        });    </script></body></html>

阅读全文

0 0