• 热门专题

ECharts系列柱状图(条形图)实例一

作者:  发布日期:2015-01-17 22:47:26
Tag标签:条形  实例  
  • ECharts主页: http://echarts.baidu.com/index.html

    ECharts-2.1.8下载地址: http://echarts.baidu.com/build/echarts-2.1.8.zip

    ECharts官方实例: http://echarts.baidu.com/doc/example.html

    ECharts官方API文档: http://echarts.baidu.com/doc/doc.html

    ECharts系列 - 柱状图(条形图)实例一

    1、项目结构

    js文件夹: 下载了ECharts之后,解压缩,如解压后的根目录是echarts-2.1.8,则到echarts-2.1.8docexamplewww路径下,把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

    echarts.jsp 在WebRoot根目录下新建echarts.jsp

    echarts.jsp

     

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

       

       

      完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到下面的效果

       

      图片中的右上角有个工具箱,点击“折线图切换”按钮后,效果如下

       

      更多的图表样式设置,可以查看ECharts的官方API文档

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规