echarts入门基础，画柱型图
注意：一定要自己引入echarts库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
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: '平均值'}
]
}
}
]
}; var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option); </script>
</html>
echarts入门基础，画柱型图的更多相关文章
- as画柱型图的简单算法（关于柱型图宽和间距问题）
做统计数据,经常用到如下柱型图: 柱图的X轴宽度(W)是已知的,在不影响柱的美观度情况下,怎么确定柱的宽度(w1)和柱间距(p1)的具体数值或比例呢? 在X轴宽度(W)已确定,柱的个数(A)是个不定值 ...
- echarts入门基础，画折线图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- echarts入门基础，画一个饼状图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- python入门基础思维导图
- 学习资源 Docker从入门到实践 pdf ，docker基础总结导图
学习资源 Docker从入门到实践 pdf ,docker基础总结导图 Docker从入门到实践 pdf 云盘地址:https://pan.baidu.com/s/1vYyxlW8SSFSsMuKaI ...
- echarts零基础快速入门
第一步:得到这个dom对象.然后进行各种操作. var myChart = echarts.init(document.getElementById('item1')); 第二步:所有的配置项全部放在 ...
- R绘图(2): 离散/分类变量如何画热图/方块图
相信很多人都看到过上面这种方块图,有点像"华夫饼图"的升级版,也有点像"热图"的离散版.我在一些临床多组学的文章里面看到过好几次这种图,用它来展示病人的临床信息 ...
- Markdown入门基础
// Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...
- C++ STL编程轻松入门基础
C++ STL编程轻松入门基础 1 初识STL:解答一些疑问 1.1 一个最关心的问题:什么是STL 1.2 追根溯源:STL的历史 1.3 千丝万缕的联系 1.4 STL的不同实现版本 2 牛刀小试 ...
随机推荐
- MySQL优化经验和方法汇总
一.服务器硬件对MySQL性能的影响 1.磁盘寻道能力(磁盘I/O),以目前高转速SCSI硬盘(7200转/秒)为例,这种硬盘理论上每秒寻道7200次,这是物理特性决定的,没有办法改变. MySQL ...
- 【BZOJ】2216: [Poi2011]Lightning Conductor
题意 给一个长度为\(n\)的序列\(a_i\),对于每个\(1 \le i \le n\),找到最小的非负整数\(p\)满足 对于任意的\(j\), \(a_j \le a_i + p - \sqr ...
- 【bzoj2002】[Hnoi2010]Bounce 弹飞绵羊 link-cut-tree
2016-05-30 11:51:59 用一个next数组,记录点x的下一个点是哪个 查询时,moveroot(n+1),access(x),splay(x) ,输出size[ch[x][0]]即为答 ...
- BZOJ4532: [BeiJing2014 WinterCamp] 珠链
Description Alex喜欢玩网络游戏,认为这是智力和体力的综合锻炼.在一次游戏活动中,他意外获得了一个传说中威力极其强大的法宝:珠链. 珠链,顾名思义,就是由许多小珠子串起来的一条链.珠子 ...
- 李洪强漫谈iOS开发[C语言-047]-数列求和
// // main.c // 53 - 数列求和 - 李洪强 // // Created by vic fan on 16/10/15. // Copyright © 2016年 李洪强. ...
- UE编辑器FTP无法连接
解决办法:http://wenwen.sogou.com/z/q197743020.htm 无法从ue连接到主机,一直就是这样的状态 1. ftp帐户密码都没有问题: 2. 后台主机也没有问题: 3. ...
- 【android】新手容易遇到的[error: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light'.]Theme出错的问题
一.概述 近期刚接手了一个项目,开发工具为eclipse,由于版本较低,且考虑到如果转android studio项目的话,会其他人的维护带来困难,所以想着还是维护项目原来的开发环境吧. 但是导入项目 ...
- C++ 单元测试 Cpputest
参见:http://cpputest.github.io/ 1. CppUTest是一个C/C++单元测试框架,可以在C/C++项目中使命. 2. 第一个测试 新建一个cpp 文件,包含一个TEST_ ...
- Python之路（一）
学了一整子python,目前看到了处理“列表”的地方,目前列表给我的感觉十分像数组,但不是java中的数组,更像是php中的数组. (1)创建列表的方法:列表名 = [列表项0,列表项1,······ ...
- c#语句 for循环嵌套
1.打印三角形. 1) 方法一.for嵌套 方法二.只用一个for 2)倒三角 3)后三角 2.求100以内质数的和. 3.一张纸厚度为0.01米,至少对折多少次才能达到珠峰的高度?(用for死循环) ...