1.action中获取到数据

@Override

    public String execute() throws Exception {

        List<Student> find = echartsService.find();

        Gson g = new Gson();

        String list = g.toJson(find);

        ServletActionContext.getResponse().setCharacterEncoding("UTF-8");

        ServletActionContext.getResponse().getWriter().write(list);

        System.out.println(list);

        return NONE;

    }

2.jsp页面应用echarts

<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.js"></script>

<script type="text/javascript" src="<%=path%>/js/echarts.js" /></script>

<script type="text/javascript">

    $(function() {

        var myChart = echarts.init(document.getElementById("main"));

        $("#btn").click(function() {

            $.ajax({

                url : "echarts",

                success : function(data) {

                    var result = eval("(" + data + ")");

                    var noe = new Array();

                    var two = new Array();

                    $.each(result, function(i, dom) {

                        noe[i] = dom.name;

                        two[i] = dom.address;

                    });

                    // 指定图表的配置项和数据

                    var option = ({

                        title : {

                            text : 'ECharts图表'

                        },

                        tooltip : {

                            trigger : 'axis',

                            axisPointer : { // 坐标轴指示器，坐标轴触发有效

                                type : 'cross' // 默认为直线，可选为：'line' | 'shadow'|'cross'

                            }

                        },

                        toolbox : {

                            show : true,

                            feature : {

                                dataView : {

                                    show : true,

                                    readOnly : true

                                },

                                restore : {

                                    show : true

                                },

                                magicType : {

                                    type : [ 'line', 'bar', 'stack', 'tiled' ]

                                },

                                saveAsImage : {

                                    show : true

                                }

                            }

                        },

                        legend : {

                            data : [ '人数' ]

                        },

                        xAxis : {

                            data : two

                        },

                        yAxis : {},

                        series : [ {

                            name : '人数',

                            type : 'bar',

                            data : noe

                        } ]

                    });

                    myChart.setOption(option);

                },

                error : function(data) {

                    alert("请求报表错误");

                }

            });

        });

    });

</script>

3.准备一个具有宽高的容器(必须有宽高)

<body>

    <input type="button" value="显示图表" id="btn" />

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

</body>

4.效果

echarts图表第一个案例的更多相关文章

  1. echarts入门，5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  2. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  3. ASP.NET MVC + ECharts图表案例

    废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...

  4. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  5. Echarts图表控件使用总结2(Line，Bar)—问题篇

    Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...

  6. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  7. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  8. echarts图表初始大小问题及echarts随窗口变化自适应

    最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是 不知道大 ...

  9. Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...

随机推荐

  1. oracle 查询最近执行过的 SQL语句(转载)

    oracle 查询最近执行过的 SQL语句 (2014-06-09 18:02:43) 转载▼   分类: Database oracle 查询最近执行过的 SQL语句 select sql_text ...

  2. jmx配置

    # ----- Execute The Requested Command ----------------------------------------- # ----- JMX Config S ...

  3. 详解Linux目录（目录树详细解释）

    给大家一篇关于Linux目录 方面的详细说明,好好读一下! Linux目录详解(RHEL5.4) linux有四种基本文件系统类型:--普通文件:如文本文件.c语言源代码.shell脚本等,可以用ca ...

  4. tomcat 7+ 启动慢 熵池阻塞变慢详解

    原因: Tomcat 7/8都使用org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom类产生安全随机类SecureRan ...

  5. [翻译]lithium介绍

    什么是li3? 首创框架 li3 是第一个并且是唯一一个从PHP 5.3+建立起来的相当出色的php框架,而且破天荒的第一次引入全新技术,包括通过一组唯一,统一的api(接口)在关系型(relatio ...

  6. 类型转换bin()、chr()、ord() 、int()、float()、str()、repr()、bytes()、tuple(s )、 list(s )   、unichr(x ) 、 ord(x )  、 hex(x )  、          type()数据类型查询

    1.bin() 将整数x转换为二进制字符串,如果x不为Python中int类型,x必须包含方法__index__()并且返回值为integer: 参数x:整数或者包含__index__()方法切返回值 ...

  7. linux开发摘要

    1.linux内核文档链接点击打开链接 2.配置文件 在out\target\product\project\obj\KERNEL_OBJ\.config中可以看到 # CONFIG_MTD_LPDD ...

  8. Bootstrap_媒体对象

    一.基本媒体对象 媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分: ☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容 ☑ 媒体对像的对象:常使用“media-o ...

  9. sql server CTE递归使用测试

    --CTE递归查询 if(object_id(N'menu') > 0) drop table menu CREATE TABLE MENU ( name nvarchar(50) NOT NU ...

  10. UVA 11520 填充正方形

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...