ECharts主页:  http://echarts.baidu.com/index.html

ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip

ECharts官方实例:  http://echarts.baidu.com/doc/example.html

ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html

1、ECharts是百度的开源项目。在其官网上有非常多实例,我就不多废话刘,这里我们引用的是echarts-all.js 官网上下载。还有jquery的js这样就省去了官网上的这样的步骤

      // 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就载入bar模块。按需载入
],
当你引用了echarts-all.js之后上面的步骤就能够去掉了

2、前台代码例如以下

新建一个div

<div id="main2" style="height:400px"></div>

当点击事件触发先吧可选项注入mychart中

var myChart2 = echarts.init(document.getElementById('main2'));

function createBar(){

        option2 = {

    title : {

        text: '练习',

        subtext: '纯属虚构'

    },

    tooltip : {

        trigger: 'axis'

    },

    grid : {  

                    width : '50%'  

                },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            magicType : {show: true, type: ['line', 'bar']},

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : false,

    xAxis : [

        {

            type : 'category',

            data : ['1月','2月','3月','4月','5月','6月','7月']

        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

        {

            name:'收入',

            type:'bar',

            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

        }

   

    ]};

     myChart2.setOption(option2);

     myChart2.hideLoading();

    getChartData1();//ajax后台交互取得数据

       }

      function getChartData1() {  

            //获得图表的options对象  

            

            var option2 = myChart2.getOption();  

            //通过Ajax获取数据  

            $.ajax({  

                type : "post",  

                async : false, //同步运行  

                url : "<%=path%>/chart_lineData1",  

                dataType : "json", //返回数据形式为json  

                success : function(data) {               

                       

                        option2.xAxis[0].data = data.category;  

                        option2.series[0].data = data.series[0].data;  

 

                        myChart2.hideLoading();  

                        myChart2.setOption(option2);    

                   

                },  

                error : function(errorMsg) {  

                    alert("请求数据失败啦!");  

                    myChart.hideLoading();  

                }  

            });  

        }

             

    </script>

3、后台代码

首先新建一个类

public class Series {

    

    public String name;  

      

    public String type;  

      

    public ArrayList<String> data;//

 

    public Series(String name, String type, ArrayList<String> arrayList) {

        this.name=name;

        this.type=type;

        this.data=arrayList;

    }

}

注意get set方法

接着上action的代码

public String lineData1() {  

            this.collects=this.collectService.findAllCollects("1");//这是我从数据库取数据

            String m[]=new String[collects.size()];

            for(int i=0;i<collects.size();i++){

                m[i]=collects.get(i).getItemAmounts().toString();//数据封装成数组

            }

            List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"收入"}));//数据分组  

            List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标  

            List<Series> series = new ArrayList<Series>();//纵坐标   

            series.add(new Series("收入", "bar",new ArrayList<String>(Arrays.asList(m))));  

            Map<String, Object> map = new HashMap<String, Object>();

            map.put("legend", legend);

            map.put("category", category);

            map.put("series", series);

            return Utils.ajaxJson(map);

        }

这里我用的封装map集合的方式传递json,Utils.ajaxJson是一个工具类,假设有不懂的看我之前的博客,上面有源代码

到这里前后台的交互就完毕了,

ECharts 与struts的后台交互之柱状图的更多相关文章

  1. echart使用与后台交互

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Ztree的简单使用和后台交互的写法(二)

    针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...

  3. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  4. JSON数据格式以及与后台交互数据转换实例

    /* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...

  5. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  6. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  7. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

  8. js与后台交互详述(入门篇)

    很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...

  9. 简单web网页与SSM后台交互

    简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...

随机推荐

  1. Memento 备忘录 快照模式 MD

    备忘录模式 简介 在不破坏封装的前提下,捕获一个对象的[内部状态],并在该对象之外保存这个状态,这样以后就可以将该对象恢复到原先保存的状态. 角色: 发起人Originator:要被备份的成员,它提供 ...

  2. 眼前一亮!十八款新潮而又独特的网站Header设计

    一个网站最重要的一个部分就是标题.这将是访问者的第一印象,设计出一个吸引眼球并且功能清晰导航还是比较容易的,但想出一个独特的header却总是困难的,这就是为什么我决定把那些对我有最影响的导航列出来了 ...

  3. 查询分页-----强势top

    查询分页:语句1性能提升10倍多,仅仅是由于多了个topkeyword,非常不理解啊!!!! 1.查询时间1s内,r_object_id主键 select top 100 * from (  sele ...

  4. 【记录】cygwin下折腾个人配置环境

    (本文由hcbbt发布,转载请注明出处,blog.csdn[dot]net/hcbbT)      cygwin是windows下的linux的模拟环境,不仅可以执行linux的各种命令,可以在cyg ...

  5. 【PAT Advanced Level】1013. Battle Over Cities (25)

    这题给定了一个图,我用DFS的思想,来求出在图中去掉某个点后还剩几个相互独立的区域(连通子图). 在DFS中,每遇到一个未访问的点,则对他进行深搜,把它能访问到的所有点标记为已访问.一共进行了多少次这 ...

  6. javascript进行遍历

    javascript进行遍历 <!doctype html> <html lang="en"> <head> <meta charset= ...

  7. [Algorithm] Search for matching words

    Implement an autocomplete system. That is, given a query string s and a set of all possible query st ...

  8. YUM常用命令详解

    yum是一个用于管理rpm包的后台程序,用python写成,可以非常方便的解决rpm的依赖关系.在建立好yum服务器后,yum客户端可以通过 http.ftp方式获得软件包,并使用方便的命令直接管理. ...

  9. java面试第四天

    修饰符static: 把对象相关的变成类相关的,它可以修饰属性.方法.代码块和内部类 static修饰属性(类变量): 那么这个属性就可以用" 类名.属性名 "来访问,也就是使这个 ...

  10. 1z0-052 q209_10

    10: A user, who is authenticated externally, logs in to a remote machine and connects to the databas ...