[html] view plain copy
1.
2. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
3. <%
4. path = request.getContextPath();
5. basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
6. >
7.
8. >
9. <html>
10. <head>
11. <base href="<%=basePath%>">
12. <title>ECharts实例</title>
13. </head>
14. <body>
15. <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
16. <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
17. <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
18.
19. <!--Step:2 Import echarts.js-->
20. <!--Step:2 引入echarts.js-->
21. <script src="js/echarts.js"></script>
22.
23. <script type="text/javascript">
24. // Step:3 conifg ECharts's path, link to echarts.js from current page.
25. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
26. require.config({
27. paths: {
28. echarts: './js'
29. }
30. });
31.
32. // Step:4 require echarts and use it in the callback.
33. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
34. require(
35. [
36. //这里的'echarts'相当于'./js'
37. 'echarts',
38. 'echarts/chart/bar',
39. 'echarts/chart/line',
40. ],
41. //创建ECharts图表方法
42. function (ec) {
43. //--- 折柱 ---
44. //基于准备好的dom,初始化echart图表
45. myChart = ec.init(document.getElementById('mainBar'));
46. //定义图表option
47. option = {
48. //标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
49. title: {
50. //主标题文本,'\n'指定换行
51. text: '2013年广州降水量与蒸发量统计报表',
52. //主标题文本超链接
53. link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
54. //副标题文本,'\n'指定换行
55. subtext: 'www.stepday.com',
56. //副标题文本超链接
57. sublink: 'http://www.stepday.com/myblog/?Echarts',
58. //水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
59. x: 'left',
60. //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
61. y: 'top'
62. },
63. //提示框,鼠标悬浮交互时的信息提示
64. tooltip: {
65. //触发类型,默认('item')数据触发,可选为:'item' | 'axis'
66. trigger: 'axis'
67. },
68. //图例,每个图表最多仅有一个图例
69. legend: {
70. //显示策略,可选为:true(显示) | false(隐藏),默认值为true
71. show: true,
72. //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
73. x: 'center',
74. //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
75. y: 'top',
76. //legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
77. data: ['蒸发量','降水量']
78. },
79. //工具箱,每个图表最多仅有一个工具箱
80. toolbox: {
81. //显示策略,可选为:true(显示) | false(隐藏),默认值为false
82. show: true,
83. //启用功能,目前支持feature,工具箱自定义功能回调处理
84. feature: {
85. //辅助线标志
86. mark: {show: true},
87. //dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,分别是启用,缩放后退
88. dataZoom: {
89. show: true,
90. title: {
91. dataZoom: '区域缩放',
92. dataZoomReset: '区域缩放后退'
93. }
94. },
95. //数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
96. dataView: {show: true, readOnly: true},
97. //magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换
98. magicType: {show: true, type: ['line', 'bar']},
99. //restore,还原,复位原始图表
100. restore: {show: true},
101. //saveAsImage,保存图片(IE8-不支持),图片类型默认为'png'
102. saveAsImage: {show: true}
103. }
104. },
105. //是否启用拖拽重计算特性,默认关闭(即值为false)
106. calculable: true,
107. //直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值
108. //横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型
109. xAxis: [
110. {
111. //显示策略,可选为:true(显示) | false(隐藏),默认值为true
112. show: true,
113. //坐标轴类型,横轴默认为类目型'category'
114. type: 'category',
115. //类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行
116. data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
117. }
118. ],
119. //直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值
120. //纵轴通常为数值型,但条形图时则纵轴为类目型
121. yAxis: [
122. {
123. //显示策略,可选为:true(显示) | false(隐藏),默认值为true
124. show: true,
125. //坐标轴类型,纵轴默认为数值型'value'
126. type: 'value',
127. //分隔区域,默认不显示
128. splitArea: {show: true}
129. }
130. ],
131.
132. //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构;对象内包含对象
133. series: [
134. {
135. //系列名称,如果启用legend,该值将被legend.data索引相关
136. name: '蒸发量',
137. //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
138. type: 'bar',
139. //系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
140. 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],
141. //系列中的数据标注内容
142. markPoint: {
143. data: [
144. {type: 'max', name: '最大值'},
145. {type: 'min', name: '最小值'}
146. ]
147. },
148. //系列中的数据标线内容
149. markLine: {
150. data: [
151. {type: 'average', name: '平均值'}
152. ]
153. }
154. },
155. {
156. //系列名称,如果启用legend,该值将被legend.data索引相关
157. name: '降水量',
158. //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
159. type: 'bar',
160. //系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
161. data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
162. //系列中的数据标注内容
163. markPoint: {
164. data: [
165. {type: 'max', name: '最大值'},
166. {type: 'min', name: '最小值'}
167. ]
168. },
169. //系列中的数据标线内容
170. markLine: {
171. data: [
172. {type: 'average', name: '平均值'}
173. ]
174. }
175. }
176. ]
177. };
178.
179. //为echarts对象加载数据
180. myChart.setOption(option);
181. }
182. );
183. </script>
184. </body>
185. </html>
186. 官方文档 http://echarts.baidu.com/echarts2/doc/doc.html#Grid http://echarts.baidu.com/option.html#xAxis.axisLine.lineStyle.color
187.