1、下载做图表时，用到的类库；
2、采用标签引入的方式（** 只需要引入 echarts-all.js 文件即可）；
3、在截取节点的时候，不能使用JQ类库，必须使用原生的javascript；
4、采用标签的引用方式：
----标签式引入环境中，常用模块的引用可通过命名空间直取，与模块化下的路径结构一样
如：fig = require('echarts/config')， lor = require('zrender/tool/color')----
实例：echarts.baidu/doc/start.html 
之前写过一篇关于HighCharts的博文，此次新系统也需要做统计图表了，HighCharts需要授权的，所以此次也不用这个版本了。百度的Echarts也很不错，大概看了一下，和HighCharts的风格没什么差别。从昨天开始研究了一下，也查了一些资料，这里集成java语言，做了一个demo。我这里做的是tag标签的写法，为了更加通用，这里也分享给大家了。
所需要的包，可以直接下载，东西挺多的，按需引入。
开始上代码。
首先是tag，这个东西，大学之后，几乎不怎么用了，没想到现在又用到了。
c语言标识符可以用下划线开头吗
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
孙侨潞为什么走了27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73try catch语句不可以嵌套使用
74
75
76
77
78
79
80
81
82
83
<%@ tag pageEncoding="UTF-8"isELIgnored="false"body-content="empty"%>
<%--自定义div容器id--%>
<%@attributename="container"required="true"%>
<%--自定义标题--%>
<%@attributename="title"required="true"%>
<%--自定义子标题--%>
<%@attributename="subtitle"required="false"%>
<%--自定义数据请求url--%>
<%@attributename="urls"required="true"%>
 
<%@ taglib prefix="c"uri="java.sun/jsp/jstl/core"%>
 
<script src="/echarts-2.1.8/build/dist/jquery.min.js"></script>
<script src="/echarts-2.1.8/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.ElementById('${container}'));
    var option={
        title : {
            text: '${title}',
            subtext: '${subtitle}'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
        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 : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} '
                }
            }
        ],
        series : []
    };
 
    //采用ajax异步请求数据
    $.ajax({
        type:'post',
        url:'${urls}',
            dataType:'json',
            success:function(result){
                if(result){
                    //将返回的category和series对象赋值给options对象内的category和series
                    option.xAxis[0].data = result.axis;
                    option.legend.data = result.legend;
                    var series_arr=result.series;
                    for(var i=0;i<series_arr.length;i++){
                        option.series[i] = result.series[i];
                    }
                    myChart.hideLoading();
                    myChart.setOption(option);
                }
             },
            error:function(errMsg){
                ("加载数据失败")
            }
    });
 
    // 为echarts对象加载数据
   // myChart.setOption(option);
</script>
写tag需要引入jstl包，谷歌下就有了。1.2之前需要两个包，一个jstl，一个standard。1.2之后貌似合并为一个了。<%@ taglib prefix="c" uri="java.sun/jsp/jstl/core"%>这句的写法也有点不同。为防万一，我是引入的两个包。
使用ajax请求，需要引入jquery的包，引入echarts的时候，同时引入这个。
在上面代码中，最主要的还是标红的那段，series是一个数组，后台加入多组数据的时候，这里需要遍历取出。
 jsp页面引入该标签：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
哈夫曼树构造技巧17
18
jquery下载的文件怎么使用<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2014/11/24
  Time: 12:02
  To change thistemplate use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"language="java"%>
<%@taglibprefix="c"  tagdir="/WEB-INF/tags"%>
<html>
<head>
    <title></title>
</head>
<body>
  <div id="main"></div>
  <c:linecharts container="main"title="测试标签"subtitle="测试子标签"urls="/tags"></c:linecharts>
</body>
</html>
前端的部分到此算是完成，然后就是后台部分了。
后台用两个java对象，封装一下要传递的数据：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
wseries;
 
importjava.util.ArrayList;
importjava.util.List;java数组转化为字符串
 
/**
 * Created by on 2014/11/25.
 */
publicclassEcharts {
    publicList<String> legend = newArrayList<String>();//数据分组
    publicList<String> axis = newArrayList<String>();//横坐标
    publicList<Series> series = newArrayList<Series>();//纵坐标
 
 
    publicEcharts(List<String> legendList, List<String> categoryList, List<Series> seriesList) {
        super();
        this.legend = legendList;
        this.axis = categoryList;
        this.series = seriesList;
    }
}
这里放series的具体数据：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。