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. 我的Android第二章

    前言 之前有很多人遇到了关于内部类的问题[主要在android的学习之中会大量的使用到],内部类是什么,内部类怎么定义,内部类的分类,内部类的好处,内部类如何访问,这里我们来结合代码简单的理解一下 1 ...

  2. iOS开发，URL编码和解码

    URL传递数据中,如果含有中文,需要进行编码: NSString *urlEncodeString = [urlStr stringByAddingPercentEncodingWithAllowed ...

  3. [Spark] Spark的RDD编程

    本篇博客中的操作都在 ./bin/pyspark 中执行. RDD,即弹性分布式数据集(Resilient Distributed Dataset),是Spark对数据的核心抽象.RDD是分布式元素的 ...

  4. pure virtual function call

    2015-04-08 10:58:19 基类中定义了纯虚函数,派生类中将其实现. 如果在基类的构造函数或者析构函数中调用了改纯虚函数, 则会出现R6205 Error: pure virtual fu ...

  5. 关于工程结合git的配置

    我们通常把代码放到git sever中,(scm manager)中,上传,下载代码, 可是通常工程的代码改动会有图标提示,改动过的,或者新增的,那么需要在eclipse的工程中做一下简单配置 1,工 ...

  6. PHP interface（接口）的示例代码

    <?php class DocumentStore { protected $data = []; public function addDocument(Documentable $docum ...

  7. Python3基础 访问列表 两个索引值之间的所有元素

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  8. 微信OAuth2.0网页授权

    1.OAuth2.0网页授权 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页 ...

  9. Oracle建表

    1.oracle数据库中的多种数据结构: 1.表结构            存储数据 2.视图 一张表或多张表中数据的字节 3.sequence 主要用来生成主键值 4.index 提高检索性能 我们 ...

  10. 微信小程序-登陆、支付、模板消息

    wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要 ...