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. java编程实现日历

    package com.beiwo.other;/* * 需求:输入一个年份和月份 ,显示当前月日情况 ,星期数要对应准确 * 1.1900年1月1号开始 * 2.星期 : 直接用总天数对7求余数 3 ...

  2. Netty : writeAndFlush的线程安全及并发问题

    使用Netty编程时,我们经常会从用户线程,而不是Netty线程池发起write操作,因为我们不能在netty的事件回调中做大量耗时操作.那么问题来了 – 1, writeAndFlush是线程安全的 ...

  3. 注释声明：TODO HACK XXX FIXME REVIEW

    注释有时候也可以用来给一段代码声明额外的信息.这些声明的格式以单个单词打头并紧跟一个冒号.可以使用的声明如下. TODO: 说明代码还未完成.应当包含下一步要做的事情. HACK: 表明代码实现走了一 ...

  4. PB-日志-系统函数2.13.7Match()、MatchW()

    ---恢复内容开始--- Match() 功 能:确定字符串中是否包含指定模式的字符. 语 法:Match ( string, textpattern ) 参 数:string:string类型,指定 ...

  5. 学习视频更新管理，对于前面数据库视频资料，以及.net资料失效感到抱歉

    首先,对不起,各位网友,我知道也都是好学的的人才会来查找视频,抱歉视频失效了.以后有需要的可以常联系我,有错误定当及时改正.如有延误多多包含. 上一次发的.net学习视频失效了,我决定帮大家多找一些学 ...

  6. 相机位姿估计0：基本原理之如何解PNP问题

    关键词:相机位姿估计 PNP问题求解 用途:各种位姿估计 文章类型:原理 @Author:VShawn(singlex@foxmail.com) @Date:2016-11-18 @Lab: CvLa ...

  7. React 快速入门小记

    大约半个月前,我一直在思考一个问题,Angular.React 和 Vue,究竟该学什么? 听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我"没有选错" ...

  8. 两个平行div之间有间隙

    两个平行的div使用 display: inline-block 会导致元素之间有空隙解决方法: 父元素设置 font-size: 0;

  9. img和css背景的选择

    在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...

  10. iOS - Share 分享/第三方登录

    1.系统方式创建分享 按照下图在 Info.plist 文件中将 Localization native development region 的值改为 China.如果不设置此项弹出的分享页面中显示 ...