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. ftp常用命令

    ABOR 中断数据连接程序 ACCT <account> 系统特权帐号 ALLO <bytes> 为服务器上的文件存储器分配字节 APPE <filename> 添 ...

  2. js,jquery获取浏览器信息

    1.js获取: 查看:window.navigator 2.jQuery获取: chrome firefox 推荐使用navigator获取userAgent然后去正则匹配 参考匹配规则:http:/ ...

  3. Selenium Chrome浏览器的启动以及proxy设置

    Selenium Chrome浏览器的启动以及proxy设置   虽然WebDriver对Firefox的支持最好,之前写的脚本也都在Firefox浏览器运行,但最近项目做了整合,发现新整合的功能不太 ...

  4. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. kafka入门教程链接

    http://www.aboutyun.com/forum.php?mod=viewthread&tid=12882 经典入门教程 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创 ...

  6. 2 . Linux常见命令

    Linux常见命令格式: 命令名称 选项 参数 ls -alh 文件/目录 --all #ls 显示当前目录内容 #ls -l 显示文件详细信息 #ls -hl h已常见单位显示文件大小 k M G# ...

  7. 【转】ACM训练计划

    [转] POJ推荐50题以及ACM训练方案 -- : 转载自 wade_wang 最终编辑 000lzl POJ 推荐50题 第一类 动态规划(至少6题, 和 必做) 和 (可贪心) (稍难) 第二类 ...

  8. 关于iOS 10不能跳转设置的解决办法

    NSURL*url=[NSURL URLWithString:@"Prefs:root=WIFI"];  Class LSApplicationWorkspace = NSClas ...

  9. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  10. Xcode 7免证书真机调试

    在Xcode 7中,苹果改变了自己在许可权限上的策略,此前Xcode只开放给注册开发者下载,但Xcode 7改变了这种惯有的做法,无需注册开发者账号,仅使用普通的Apple ID就能下载和上手体验.此 ...