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
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>ECharts实例</title>
- </head>
- <body>
- <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
- <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
- <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
- <!--Step:2 Import echarts.js-->
- <!--Step:2 引入echarts.js-->
- <script src="js/echarts.js"></script>
- <script type="text/javascript">
- // Step:3 conifg ECharts's path, link to echarts.js from current page.
- // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
- require.config({
- paths: {
- echarts: './js'
- }
- });
- // Step:4 require echarts and use it in the callback.
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- require(
- [
- //这里的'echarts'相当于'./js'
- 'echarts',
- 'echarts/chart/bar',
- 'echarts/chart/line',
- ],
- //创建ECharts图表方法
- function (ec) {
- //--- 折柱 ---
- //基于准备好的dom,初始化echart图表
- var myChart = ec.init(document.getElementById('mainBar'));
- //定义图表option
- var option = {
- //标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
- title: {
- //主标题文本,'\n'指定换行
- text: '2013年广州降水量与蒸发量统计报表',
- //主标题文本超链接
- link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
- //副标题文本,'\n'指定换行
- subtext: 'www.stepday.com',
- //副标题文本超链接
- sublink: 'http://www.stepday.com/myblog/?Echarts',
- //水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'left',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'top'
- },
- //提示框,鼠标悬浮交互时的信息提示
- tooltip: {
- //触发类型,默认('item')数据触发,可选为:'item' | 'axis'
- trigger: 'axis'
- },
- //图例,每个图表最多仅有一个图例
- legend: {
- //显示策略,可选为:true(显示) | false(隐藏),默认值为true
- show: true,
- //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'center',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'top',
- //legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
- data: ['蒸发量','降水量']
- },
- //工具箱,每个图表最多仅有一个工具箱
- toolbox: {
- //显示策略,可选为:true(显示) | false(隐藏),默认值为false
- show: true,
- //启用功能,目前支持feature,工具箱自定义功能回调处理
- feature: {
- //辅助线标志
- mark: {show: true},
- //dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,分别是启用,缩放后退
- dataZoom: {
- show: true,
- title: {
- dataZoom: '区域缩放',
- dataZoomReset: '区域缩放后退'
- }
- },
- //数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
- dataView: {show: true, readOnly: true},
- //magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换
- magicType: {show: true, type: ['line', 'bar']},
- //restore,还原,复位原始图表
- restore: {show: true},
- //saveAsImage,保存图片(IE8-不支持),图片类型默认为'png'
- saveAsImage: {show: true}
- }
- },
- //是否启用拖拽重计算特性,默认关闭(即值为false)
- calculable: true,
- //直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值
- //横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型
- xAxis: [
- {
- //显示策略,可选为:true(显示) | false(隐藏),默认值为true
- show: true,
- //坐标轴类型,横轴默认为类目型'category'
- type: 'category',
- //类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行
- data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
- }
- ],
- //直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值
- //纵轴通常为数值型,但条形图时则纵轴为类目型
- yAxis: [
- {
- //显示策略,可选为:true(显示) | false(隐藏),默认值为true
- show: true,
- //坐标轴类型,纵轴默认为数值型'value'
- type: 'value',
- //分隔区域,默认不显示
- splitArea: {show: true}
- }
- ],
- //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构;对象内包含对象
- series: [
- {
- //系列名称,如果启用legend,该值将被legend.data索引相关
- name: '蒸发量',
- //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
- type: 'bar',
- //系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
- 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],
- //系列中的数据标注内容
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- },
- //系列中的数据标线内容
- markLine: {
- data: [
- {type: 'average', name: '平均值'}
- ]
- }
- },
- {
- //系列名称,如果启用legend,该值将被legend.data索引相关
- name: '降水量',
- //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
- type: 'bar',
- //系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
- 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],
- //系列中的数据标注内容
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- },
- //系列中的数据标线内容
- markLine: {
- data: [
- {type: 'average', name: '平均值'}
- ]
- }
- }
- ]
- };
- //为echarts对象加载数据
- myChart.setOption(option);
- }
- );
- </script>
- </body>
- </html>
完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到下面的效果
图片中的右上角有个工具箱,点击“折线图切换”按钮后,效果如下
更多的图表样式设置,可以查看ECharts的官方API文档
ECharts系列 - 柱状图(条形图)实例一相关推荐
- php柱状图html代码,html5生成柱状图(条形图)效果的实例代码
下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码.小编觉得挺不错的,现在分享给大家,也给大家一个参考.一起跟随小编过来看看吧 XML/HTML Code复制内容到剪贴板 (func ...
- echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
- ECharts系列 - 地图 实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
- 【ECharts系列|01入门】 从入门到天黑【入门级教程实战】
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝大部分 ...
- 前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图 使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
- vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
- vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
- Python 数据分析三剑客之 Matplotlib(六):直方图 / 柱状图 / 条形图的绘制
CSDN 课程推荐:<Python 数据分析与挖掘>,讲师刘顺祥,浙江工商大学统计学硕士,数据分析师,曾担任唯品会大数据部担任数据分析师一职,负责支付环节的数据分析业务.曾与联想.亨氏.网 ...
- echarts rich设置动态图片/动态数据;echarts 人均收入柱状图 window系统显示不出国旗;echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...
最新文章
- PHP如何通过Http Post请求发送Json对象数据?
- oracle迁移mysql视图中函数问题,mysql中to_char自定义函数。
- Pytorch:transforms的二十二个方法
- 【剑道之道】亦是生存之道
- (转) Spring 3 报org.aopalliance.intercept.MethodInterceptor问题解决方法
- k8s系统架构图(二)
- 命令父窗口变颜色_【编程】第五期:Python Tkinter图形化教程03布局之父窗口、pack和LabelFrame...
- web.config转义符
- java biginteger string_String到BigInteger java
- 关于apache的重启
- 数学建模之层次分析法
- eclipse安装与概述
- 永久且免费的CRM系统排行
- lptwrite matlab,matlab读取地震数据sgy
- php查找sql,sql如何去重查询
- 科思创为全新概念车丰田LQ提供可持续解决方案
- ble协议栈从零开始七(linklayer 之 privacy)
- nginx 启动报错问题排查,和阿里云盾卸载方法
- Leetcode 684: 冗余连接 Redundant Connection
- Android 学习之垂直切换的圆角 Banner 和垂直指示器
热门文章
- 草本香皂的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 小安安日本文化行16 母亲节
- Java中paint()函数的用法
- dedecms 后台修改系统设置,但是config.cache.inc.php文件不能写入
- 2个域名2个网站共用一个空间的方法
- python datetime与timestamp
- A Bug‘s Life POJ 2492 加权并查集
- Java - Springboot 部署jar
- PyAutoGui自动点赞+解决 TypeError Don‘t know how to convert parameter 4 问题
- redis详解及哨兵模式搭建