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

Myth丶恋晨 2022-07-14 05:12 256阅读 0赞

ECharts主页：  [http://echarts.baidu.com/index.html][http_echarts.baidu.com_index.html]

ECharts-2.1.8下载地址：  [http://echarts.baidu.com/build/echarts-2.1.8.zip][http_echarts.baidu.com_build_echarts-2.1.8.zip]

ECharts官方实例：  [http://echarts.baidu.com/doc/example.html][http_echarts.baidu.com_doc_example.html]

ECharts官方API文档：  [http://echarts.baidu.com/doc/doc.html][http_echarts.baidu.com_doc_doc.html]

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

## 1、项目结构 ##

![Center][]

**js文件夹：** 下载了ECharts之后，解压缩，如解压后的根目录是echarts-2.1.8，则到echarts-2.1.8\\doc\\example\\www路径下，把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

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

**echarts.jsp**

**\[java\]**  [view plain][] [copy][view plain]

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.       
15.       
16.     <div id="mainBar" style="height:500px;border:1px solid \#ccc;padding:10px;"></div>  
17.       
18.       
19.       
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.                     //主标题文本，'\\n'指定换行  
50.                     text: '2013年广州降水量与蒸发量统计报表',  
51.                     //主标题文本超链接  
52.                     link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',  
53.                     //副标题文本，'\\n'指定换行  
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内容。 数组项通常为文本，'\\n'指定换行  
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)，即可看到下面的效果

![Center 1][]

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

![Center 2][]

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

**原文地址：http://blog.csdn.net/zou128865/article/details/42802671/**

[http_echarts.baidu.com_index.html]: http://echarts.baidu.com/index.html
[http_echarts.baidu.com_build_echarts-2.1.8.zip]: http://echarts.baidu.com/build/echarts-2.1.8.zip
[http_echarts.baidu.com_doc_example.html]: http://echarts.baidu.com/doc/example.html
[http_echarts.baidu.com_doc_doc.html]: http://echarts.baidu.com/doc/doc.html
[Center]: /images/20220714/960256a220c54b0eb66d35e9c062aba3.png
[view plain]: http://blog.csdn.net/wangcunhuazi/article/details/41621389#
[Center 1]: /images/20220714/21ef340f45db4d1da6f7c034396c2005.png
[Center 2]: /images/20220714/cd591d2bb4144ea59db08aac21158794.png