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 ...
随机推荐
- C#并行编程之数据并行
所谓的数据并行的条件是: 1.拥有大量的数据. 2.对数据的逻辑操作都是一致的. 3.数据之间没有顺序依赖. 运行并行编程可以充分的利用现在多核计算机的优势.记录代码如下: public class ...
- SQLServer中系统存储过程sp_spaceused
sp_spaceused 执行sp_spaceused存储过程的时候可以不用带参数,直接执行,或者exec sp_spaceused都可以,返回两个结果集: 列名 数据类型 描述 database_n ...
- Android 广播 BroadcastReceiver
Android 系统里定义了各种各样的广播,如电池的使用状态,电话的接收和短信的接收,开机启动都会产生一个广播.当然用户也可以自定义自己的广播. 既然说到广播,那么必定有一个广播发送者,以及广播接收器 ...
- ASCII码表（二进制 十进制 十六进制）
css里,允许使用转义字符\+ascii16进制形式; 例如: e的ascii 16进制是65,我们就写为\65 expression -> expr\65ssion 二进制 十进制 十六进制 ...
- 选中统计winform
private void gridControl1_MouseUp(object sender, MouseEventArgs e) { Dictionary<string, decimal&g ...
- Djunit工作记录
1.下载djunit 解压后放置到eclipse的plugins目录下即可 2.测试程序必须继承DjunitTestCase 3.测试程序完run as DJunitTest 运行 4.在djunit ...
- Java Thread 多线程 介绍
1.线程概述 几乎所有的操作系统都支持同时运行多个任务,一个任务通常就是一个程序,每个运行中的程序就是一个进程. 当一个程序运行时,内部可能包含了多个顺序执行流,每个顺序执行流就是一个线程. 2.线程 ...
- JAVA 学习随笔 ： JDK Enhancement Process JEP process
是时候寻找一个学习JAVA的路径了 ---- JDK Enhancement Process Oracle发布了JDK增强提案与路线图进程,目的在于鼓励OpenJDK提交者贡献点子和扩展以改进Open ...
- 无光驱在32位windows系统下安装64位windows系统
位的系统. 大家都知道,32位的操作系统最多只能支持3.2G的内存,现在内存白菜价,很多人都在原有基础上购入新内存,这样最少也有4G了,为了让内存不浪费,我 们只有升级到64位操作系统.但是很多朋友又 ...
- 使用自定义签名的https的ssl安全问题解决和metro的webservice调用
最近一直在忙新的项目,每天加班到8点多,都没来写博客了.新的项目遇到了很多问题,现在趁着突然停电来记录下调用https的问题吧. 我们服务主要是,我们调用数据源数据,并且再提供接口供外部数据调用. 我 ...