此文章是vip文章,如何查看?  

1,点击链接获取密钥 http://nicethemes.cn/product/view29882.html

2,在下方输入文章查看密钥即可立即查看当前vip文章


ECharts简单Demo之WEBFORM版本

  • 时间:
  • 浏览:
  • 来源:互联网

前言

本来今天上午已经快写完了,一个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
分析:

  1. 初识化模型
  2. 指定配置项(数据、模型均未显示)
  3. 页面加载完毕(模型显示、数据未添加显示)

获取后台数据

<!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);
    }
}

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

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

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>

本文链接http://element-ui.cn/news/show-467847.aspx