JSP使⽤Echarts的最简单的例⼦
Echarts是百度的页⾯图表框架，使⽤其稍作配置就能在web上整出漂亮的图表。
本篇⽂章简单的介绍⼀下“JSP使⽤Echarts的最简单的例⼦“，例⼦图如下
关于echarts详细资料可以看这⾥：echarts.baidu/index.html
图表显⽰是需要数据的，但是其官⽹教程中为了演⽰⽅便直接在页⾯js中填⼊数据，如下⾯链接所⽰，周⼀、周⼆等数据都是在页⾯直接写好：
echarts.baidu/doc/example/line1.html
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周⼀','周⼆','周三','周四','周五','周六','周⽇']
}
]
⽽我们更经常的要做的操作是从远程服务器将数据取出，放⼊图表。熟悉ajax的⼈，⾃然可以将上⾯的代码少做修改，但⽹上的例⼦太少，我这边简单贴⼀下
页⾯端参考代码：
[html]
1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2.    pageEncoding="UTF-8"%>
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <!-- 引⼊ ECharts ⽂件 -->
8. <script src="js/echarts3/echartsmon.min.js"></script>
9. <script type="text/javascript"
10.    src="${tPath}/js/jquery-3.2.1.js"></script>
11. </head>
12.
13. <body>
14.    <!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM -->
15.    <div id="main" ></div>
16.    <script type="text/javascript">
17.        // 基于准备好的dom，初始化echarts实例
18.        var myChart = echarts.ElementById('main'));
19.        var url = '${tPath}/GetAllDataServlet';
20.        $.getJSON(url).done(function(json) {
21.            // 2.获取数据
22.            salesVolume = json.salesVolume;//销量
23.            bussinessVolume = json.bussinessVolume;//营业额
24.            months = hs;//⽉份
25.
26.            // 3.更新图表myChart的数据
27.            var option = {
28.                title : {
29.                    text : 'ECharts ⼊门⽰例'
30.                },
31.                tooltip : {},
32.                legend : {
33.                    data : [ '销量' ],
34.                    data : [ '营业额' ]
35.                },
36.                xAxis : {
37.                    data : months
38.                },
39.                yAxis : {},
40.                series : [ {
41.                    name : '销量',
42.                    type : 'bar',
43.                    data : salesVolume
44.                }, {
45.                    name : '营业额',
46.                    type : 'line',
47.                    data : bussinessVolume
48.                } ],
49.                toolbox : {
50.                    show : true,
51.                    feature : {
52.                        mark : {
53.                            show : true
54.                        },
55.                        dataView : {
56.                            show : true,
57.                            readOnly : false
58.                        },
59.                        magicType : {
60.                            show : true,
61.                            type : [ 'line', 'bar' ]
62.                        },
63.                        restore : {
64.                            show : true
65.                        },
66.                        saveAsImage : {
67.                            show : true
68.                        }
69.                    }
70.                },
71.            }
72.            myChart.setOption(option);
73.        })
74.    </script>
75.
76. </body>
77.
78. </html>
服务器端参考代码：
[java]
1. @WebServlet("/GetAllDataServlet")
2. public class GetAllDataServlet extends HttpServlet {
3.    private static final long serialVersionUID = 1L;
4.
5.    public GetAllDataServlet() {
6.        super();
7.    }
8.
9.    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
10.        /*销量*/
11.        Integer[] salesVolume = {10,100,20,56,35,80};
12.        /*营业额*/
13.        double[] bussinessVolume = {10*10,100*8.5,20*9.5,56*9,35*9.5,80*9};
14.        /*横轴, ⽉份数据*/
15.        String[] months = {"1","2","3","4","5","6"};
16.
17.        Map<String, Object> map = new HashMap<>();
18.        map.put("salesVolume", salesVolume);
19.        map.put("bussinessVolume",bussinessVolume);
20.        map.put("months", months);
21.
22.        Writer().JSONString(map));
23.
24.    }
25.
26.    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
27.        doGet(request, response);
setoption
28.    }
29.
30. }
使⽤了FastJson⽣成json字符串，格式形如：
[html]
1. {"bussinessVolume":[100.0,850.0,190.0,504.0,33
2.5,720.0],"months":["1","2","3","4","5","6"],"salesVolume":[10,100,20,56,35,80]}
其他：
实际上你也可以不⽤json⼯具，完全⾃⼰⼿写得到上述格式化字符串。
项⽬参考代码：
有⼀个EclipseJEE的参考代码似乎传不上来，只好传到资源哪⾥了：
download.csdn/detail/zhrubin/9837529
项⽬相关Git地址：
ding/zhrb/echartsdemo.git
转载⾃blog.csdn/zhrubin/article/details/46123771