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 牛刀小试 ...
随机推荐
- NOIp 2014 #3 寻找道路 Label:图论
题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...
- 洛谷 P1198 [JSOI2008]最大数 Label:线段树
题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度. 2. 插入操作 ...
- 【BZOJ3343】教主的魔法 分块+二分
Description 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. 每个人的 ...
- 五、点数器《苹果iOS实例编程入门教程》
该app为应用的功能为一个简单的数数程序 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View Applic ...
- js通过sessionStorage实现的返回上一页
通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
- 模拟淘宝使用cookie记录登录名，
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 【转】Selenium WebDriver + Python 环境
转自:http://www.myext.cn/webkf/a_11878.html 1. 下载必要工具及安装包 1.1 [Python开发环境] 下载并安装Python 2.7.x版本 下载地址:ht ...
- 重命名PDF打印文件名
Odoo系统默认打印出来的PDF文件都是以当前文档模型对象对应的模板文件名命名的,对用户来说,这样的命名很不友好. 我们希望能够将打印出来的文件名以单号命名,下面是实现这种目的的方法. 在report ...
- jq制作博客已存在多少天
function current(){ var d=new Date(),str=''; var date=((d.getMonth()+1)*30+(d.getFullYear())*365+d.g ...
- javascript中的删除方法
可能呢再开发的过程中呢使用的不是很多,但是碰上呢可以注意下 1.比如: var x = 10; delete x; console.log(x); 结果是多少,是10,不是异常也不是undefined ...