1. require.config({
2. paths: {
3. echarts: './js'
4. }
5. });
6.
7. // Step:4 require echarts and use it in the callback.
8. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
9. require(
10. [
11. //这里的'echarts'相当于'./js'
12. 'echarts',
13. 'echarts/chart/bar',
14. 'echarts/chart/line',
15. ],
16. //创建ECharts图表方法
17. function (ec) {
18. //--- 折柱 ---
19. //基于准备好的dom,初始化echart图表
20. myChart = ec.init(document.getElementById('mainBar'));
21. //定义图表option
22. option = {
23. //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
24. title: {
25. //主标题文本，'\n'指定换行
26. text: '2013年广州降水量与蒸发量统计报表',
27. //主标题文本超链接
28. link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
29. //副标题文本，'\n'指定换行
30. subtext: 'www.stepday.com',
31. //副标题文本超链接
32. sublink: 'http://www.stepday.com/myblog/?Echarts',
33. //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
34. x: 'left',
35. //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
36. y: 'top'
37. },
38. //提示框，鼠标悬浮交互时的信息提示
39. tooltip: {
40. //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
41. trigger: 'axis'
42. },
43. //图例，每个图表最多仅有一个图例
44. legend: {
45. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
46. show: true,
47. //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
48. x: 'center',
49. //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
50. y: 'top',
51. //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
52. data: ['蒸发量','降水量']
53. },
54. //工具箱，每个图表最多仅有一个工具箱
55. toolbox: {
56. //显示策略，可选为：true（显示） | false（隐藏），默认值为false
57. show: true,
58. //启用功能，目前支持feature，工具箱自定义功能回调处理
59. feature: {
60. //辅助线标志
61. mark: {show: true},
62. //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
63. dataZoom: {
64. show: true,
65. title: {
66. dataZoom: '区域缩放',
67. dataZoomReset: '区域缩放后退'
68. }
69. },
70. //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
71. dataView: {show: true, readOnly: true},
72. //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
73. magicType: {show: true, type: ['line', 'bar']},
74. //restore，还原，复位原始图表
75. restore: {show: true},
76. //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
77. saveAsImage: {show: true}
78. }
79. },
80. //是否启用拖拽重计算特性，默认关闭(即值为false)
81. calculable: true,
82. //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
83. //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
84. xAxis: [
85. {
86. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
87. show: true,
88. //坐标轴类型，横轴默认为类目型'category'
89. type: 'category',
90. //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
91. data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
92. }
93. ],
94. //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
95. //纵轴通常为数值型，但条形图时则纵轴为类目型
96. yAxis: [
97. {
98. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
99. show: true,
100. //坐标轴类型，纵轴默认为数值型'value'
101. type: 'value',
102. //分隔区域，默认不显示
103. splitArea: {show: true}
104. }
105. ],
106.
107. //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
108. series: [
109. {
110. //系列名称，如果启用legend，该值将被legend.data索引相关
111. name: '蒸发量',
112. //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
113. type: 'bar',
114. //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
115. 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],
116. //系列中的数据标注内容
117. markPoint: {
118. data: [
119. {type: 'max', name: '最大值'},
120. {type: 'min', name: '最小值'}
121. ]
122. },
123. //系列中的数据标线内容
124. markLine: {
125. data: [
126. {type: 'average', name: '平均值'}
127. ]
128. }
129. },
130. {
131. //系列名称，如果启用legend，该值将被legend.data索引相关
132. name: '降水量',
133. //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
134. type: 'bar',
135. //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
136. 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],
137. //系列中的数据标注内容
138. markPoint: {
139. data: [
140. {type: 'max', name: '最大值'},
141. {type: 'min', name: '最小值'}
142. ]
143. },
144. //系列中的数据标线内容
145. markLine: {
146. data: [
147. {type: 'average', name: '平均值'}
148. ]
149. }
150. }
151. ]
152. };
153.
154. //为echarts对象加载数据
155. myChart.setOption(option);
156. }
157. );
158. </script>
159. </body>
160. </html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
