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);
setoption28. }
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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论