Echarts_1:水平柱体
Echarts：http://echarts.baidu.com/index.html
这下面是我自己总结的一些配置注释，分享~
效果图：
小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>张赛</title>
</head>
<body>
<div id="div_main" style="height: 800px; width: 1200px"></div>
<script src="../js/echarts/echarts3.2.2.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("div_main"));
//数据处理
var orderY = ['1', '2'], contrasY = ['3', '4'], xAxisData = ['名字1', '名字2'], danWei = "个", showData = ['数量1', '数量2'], danWeiArry = ['定单数量', '合同数量'];
var colors = ['#5793f3', '#d14a61', '#675bba'];
// 指定图表的配置项和数据
var option = {
title: {
//标题
text: '订单-合同统计',
//subtext: '张赛',
//sublink: 'http://weibo.com/u/5688524679/home?leftnav=1'//点击subtext跳转地址
},
toolbox: {
//设置右上角的图标（切换折线图，下载什么的）
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis',//当显示的信息需要综合的时候需添加
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：‘line‘ | ‘shadow‘,鼠标放上时候的样式
}
//,
//formatter: function (params) {
// //设置鼠标放在柱体上时的显示内容，formatter没有会默认
// //var tar0 = params[0];
// //var tar1 = params[1];
// //return tar0.name + '<br/>' + tar0.seriesName + ' : ' + tar0.value + '<br/>' + tar1.seriesName + ' : ' + tar1.value;
//}
},
legend: {
data: showData//图标正中间上方的分类，series中的name出现在这的柱体才会显示
},
dataZoom: [
//鼠标滚轴放大配置
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'//设置竖排放大轴
}
],
//calculable: false,
grid: { // 控制图的大小，调整下面这些值就可以，
x: 120,
x2: 170,
y2: 200,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
xAxis: {
//x轴相关设置
//每个柱体的名称
data: xAxisData,
type: 'category',
axisLabel: {
interval: 0,//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
rotate: 45,//柱体名字偏移的角度数
margin: 10,//柱体名字往下的距离,刻度标签与轴线之间的距离。
textStyle: {
color: "red"
}
//,
//formatter: function (val) {
// //文字格式化
// return val.split("").join("\n");//使用这个可以是文字竖排放置，但是使用dataZoom的时候会报错
//}
},
},
yAxis: [
{
//y轴设置
//设置最大最小和平均值时需要添加
type: 'value',
name: danWeiArry[0],
//position: 'right',//让y轴在右边
//offset: 80, //如果右边有两个y轴，之间的距离
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}' + danWei
}
},
{
//y轴设置
//设置最大最小和平均值时需要添加
type: 'value',
name: danWeiArry[1],
//position: 'right',//让y轴在右边
//offset: 80, //如果右边有两个y轴，之间的距离
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}' + danWei
}
},
],
series: [
{
//数据配置
name: showData[0],//柱体的名称
type: 'bar',//数据样式：bar（柱状），line（折线）
data: orderY,//数据数组[1,2 ,3 ,4 ,5]
barWidth: 80,//设置柱体的宽度
//stack: '堆叠柱体',//设置柱体的分类，堆叠顺序按series下的数组顺序
label: {
normal: {
show: true,//设置柱体数值是否显示
position: 'top'//设置柱体数值显示的位置：top,bottom,insideRight,insideLeft,默认是中间
}
},
//itemStyle: {
// normal: {
// barBorderColor: 'rgba(0,0,0,0)',//柱体背景色
// color: '#C25552'//柱体本来的颜色
// },
// emphasis: {
// barBorderColor: 'rgba(0,0,0,0)',//鼠标放到柱体上时柱体背景色
// color: '#C25552'//鼠标放到柱体上时柱体的颜色
// }
//},
markPoint: {
//显示最大最小值
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
//显示平均值
data: [
{ type: 'average', name: '平均值' }
]
}
}
,
{
//数据配置
name: showData[1],//柱体的名称
type: 'bar',//数据样式：bar（柱状），line（折线）
yAxisIndex: 1,
data: contrasY,//数据数组[1,2 ,3 ,4 ,5]
barWidth: 80,//设置柱体的宽度
//stack: '堆叠柱体',//设置柱体的分类，堆叠顺序按series下的数组顺序
label: {
normal: {
show: true,//设置柱体数值是否显示
position: 'top'//设置柱体数值显示的位置：top,bottom,insideRight,insideLeft,默认是中间
}
},
//itemStyle: {
// normal: {
// barBorderColor: 'rgba(0,0,0,0)',//柱体背景色
// color: '#2F4554'//柱体本来的颜色
// },
// emphasis: {
// barBorderColor: 'rgba(0,0,0,0)',//鼠标放到柱体上时柱体背景色
// color: '#2F4554'//鼠标放到柱体上时柱体的颜色
// }
//},
markPoint: {
//显示最大最小值
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
//显示平均值
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
写文不易,转载请注明出处：http://www.cnblogs.com/zszs/p/5695100.html
Echarts_1:水平柱体的更多相关文章
- 01.SQLServer性能优化之---水平分库扩展
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 第一次引入文件组的概念:http://www.cnblogs.com/dunitian/ ...
- 水平可见直线 bzoj 1007
水平可见直线 (1s 128M) lines [问题描述] 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆 ...
- 从scheduler is shutted down看程序员的英文水平
我有个windows服务程序,今天重点在测试系统逻辑.部署后,在看系统日志时,不经意看到一行:scheduler is shutted down. 2016-12-29 09:40:24.175 {& ...
- CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...
- css权威指南-基本视觉格式化（水平与垂直）
1.基本概念 (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法 就是使之成为浮动或定位元素. ( ...
- IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...
- DevExpress Carousel 设置水平滑动列表
DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项. 要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPan ...
- [poj1113][Wall] (水平序+graham算法 求凸包)
Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...
- IOS跑马灯效果，实现文字水平无间断滚动
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...
随机推荐
- 解决web浏览器与servlet之间传输数据时出现的乱码问题
1.使用getParam等方法获取请求参数时遇到乱码 浏览器发送的请求参数使用的编码就是打开网页时使用的编码.如果服务器端获取到发过来的请求参数,默认使用ISO8859-1进行解码操作,中文一定会有乱 ...
- 配置java环境 ，安装Android Studio...(ps:用eclipse也不错，但as是趋势 自己凭爱好选择)
to:青科大可爱的学弟学妹: 配置java环境 step1:下jdk 直接打开链接即可(ps:复制链接到迅雷下载更快哦) 64位的:http://download.oracle.com/otn-pub ...
- java 关键字 assert的学习
之前在学习java源码时,发现了assert这个不常用的关键字.下面直接来介绍下这个关键字的使用. assert是什么? 它是jdk1.4之后新增加的关键字,没了. assert的作用是什么? ass ...
- 二十八、Java基础--------正则表达式
在对字符串进行处理时一方面可以利用String对象的一些处理方法另一方面可以利用正则表达式,但是一般情况下用String对象方法进行处理起来会相对麻烦一些而正则表达式可以很方便的解决问题.为了更好的学 ...
- REST WCF Service中的WebMessageBodyStyle
这个参数是个枚举包括如下值: WebMessageBodyStyle.Bare WebMessageBodyStyle.Wrapped WebMessageBodyStyle.WrappedReque ...
- 108 vpn iptables
[root@fge108 webapps]# iptables -t nat -A POSTROUTING -s 192.168.10.0/24 -j SNAT --to-source 47.88.1 ...
- Program.cs
Program.cs using System; namespace HelloWorld { class Program { [STAThread] static void Main(string[ ...
- Android开发能够帮你更好开发的19个开发工具
要想快速开发一个Android应用,通常会用到很多工具,巧妙利用这些工具,能让我们的开发工作事半功倍,节省大量时间,下面大连Android开发培训小编就为大家介绍下这19个开发工具都有神马用途. 1. ...
- 服务器断电保护神v2.2
下载链接: https://pan.baidu.com/s/1bph5IFX 密码: evbn 使用说明:①每15秒检测一次,当列表内的主机PING不通时将执行关机②支持4种关机方式,理论上第一种方式 ...
- 学习ceph官网的ceph块设备命令（一）
一)存储池命令 1.列出存储池 #ceph osd lspools #ceph osd pool ls 2.创建存储池 # ceph osd pool create yhcpool 512 pool ...