ECharts系列 - 柱状图（条形图）实例一

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.8\doc\example\www路径下，把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

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

echarts.jsp

[java] view
plaincopyprint?

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

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

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

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

时间： 2024-10-05 19:43:47

ECharts系列 - 柱状图（条形图）实例一的相关文章

PHP+ECharts系列 - 柱状图（条形图）实例一

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script> <script src="jquery.js"></script> </head> <body> &l

ECharts系列 - 地图 实例一

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 1.项目结构 js文件夹: 下载了EChar

深入浅出ECharts系列 （二） 折线图

深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载的版本,也可以自己定制相应功能的版本,下面附上插件的下载地址: http://echarts.baidu.com/download.html 我们下载完整版为大家进行演示. 3. 正式开始 首先,我新建了一个MVC4项目,将下载的文件放到对应的位置: 然后新建一个控制器和对应的视图,添加对文件的引用

MySQL搭建系列之多实例

所谓多实例,就是在一台服务器上搭建.运行多个MySQL实例,每个实例使用不同的服务端口,通过不同的socket监听:物理上,每个实例拥有独立的参数配置文件及数据库. 通常情况下,一台服务器是不建议运行多个MySQL实例的,尤其是生产环境,因为这会造成资源相互强占问题.但在一些高可用环境中,却有这样的需求,比如:利用Heartbeat搭建的故障转移集群环境,若主备服务器只运行一个MySQL实例,则备用服务器平常处于闲置状态,造成了资源浪费:若各自运行一个MySQL实例,则在一方故障时,要求另一方接

mysql系列之多实例2----基于多配置文件

经过上一篇博文mysql系列之多实例1----介绍对mysql多实例进行了简单的介绍,本片博文将开始针对mysql多实例的第一种实现方案,基于多配置文件的mysql多实例进行部署实现. 环境: CentOS 6.5 x86_64位 采用最小化安装,系统经过了基本优化 selinux 为关闭状态,iptables 为无限制模式 mysql版本:mysql-5.5.38 源码包存放位置:/usr/local/src 源码包编译安装位置:/usr/local/mysql 数据库存放位置:/mydata

Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年5月5日 http://www.cnblogs.com/fanshuyao/ 做了个柱状图的报表,如下: 但是图和下面的表格没有对齐,需要

CSS实现的柱状图效果实例代码

CSS实现的柱状图效果实例代码:柱状图一般用于数据统,比较直观人性化,下面就简单介绍一下如何使用CSS实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="

ECharts动态加载堆叠柱状图的实例

一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 100%; height: 400px;" id="main"> </div> 三.js代码(获取数据以及对数据的处理方法): function loadData(callback){ $.ajax({ url: 'test.json', dataType: 'js

Thinkphp+ECharts生成柱状图

1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>销售柱状图</title> <!-- 引入ECharts文件 --> <script type="text/ja