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. MYSQL中replace into的用法

    新建一个test表,三个字段,id,title,uid,  id是自增的主键,uid是唯一索引: 插入两条数据 '); ');执行单条插入数据可以看到,执行结果如下: [SQL]insert into ...

  2. angularJS之$watch的一个小介绍

    现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...

  3. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

  4. ftp相关资料

    一.ftp状态码 110  重新启动标记应答.在这种情况下文本是确定的,它必须是:MARK   yyyy=mmmm,其中yyyy是用户进程数据流标记,mmmm是服务器标记.      120     ...

  5. OC-内存管理

    解铃还须系铃人 --1--内存管理的原理及分类 1.1 内存管理的原理 1.2 内存管理的分类 --2--手动内存管理 2.1 关闭ARC的方法 2.2 手动管理(MRC)快速入门 --3-- 内存管 ...

  6. Web Service简介 内部资料 请勿转载 谢谢合作

    1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...

  7. [原创]WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  8. https 单向认证和双向认证配置

    HTTPS 是我们开发中经常用到的通信加密技术,能有效保护我们网络访问中的安全,本文主要讲解单向 和 双向 https 的配置.关于https 的实现原理在这里我就不赘述了,附上阮一峰老师的关于htt ...

  9. Fragment全解析系列（一）：那些年踩过的坑

    开始之前 最新版知乎,单Activity多Fragment的架构,响应可以说非常"丝滑",非要说缺点的话,就是没有转场动画,并且转场会有类似闪屏现象.我猜测可能和Fragment转 ...

  10. selenium 封装代码

    package pers.xeon.automate.auxt; import org.openqa.selenium.By; import org.openqa.selenium.WebElemen ...