option2
option = {
tooltip : {
show: true,
trigger: 'item'
},
legend: {
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'bar',
itemStyle: { // 系列级个性化样式,纵向渐变填充
normal: {
barBorderColor:'red',
barBorderWidth: 5,
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'green'],[1, 'yellow']]
)
})()
},
emphasis: {
barBorderWidth: 5,
barBorderColor:'green',
color: (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'red'],[1, 'orange']]
)
})(),
label : {
show : true,
position : 'top',
formatter : "{a} {b} {c}",
textStyle : {
color: 'blue'
}
}
}
},
data:[220, 232, 101, 234, 190, 330, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
data:[120, '-', 451, 134, 190, 230, 110]
},
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle: { // 系列级个性化
normal: {
barBorderWidth: 6,
barBorderColor:'tomato',
color: 'red'
},
emphasis: {
barBorderColor:'red',
color: 'blue'
}
},
data:[
320, 332, 100, 334,
{
value: 390,
symbolSize : 10, // 数据级个性化
itemStyle: {
normal: {
color :'lime'
},
emphasis: {
color: 'skyBlue'
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'bar',
barWidth: 40, // 系列级个性化,柱形宽度
itemStyle: {
normal: { // 系列级个性化,横向渐变填充
borderRadius: 5,
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
620, 732,
{
value: 701,
itemStyle : { normal: {label : {position: 'inside'}}}
},
734, 890, 930, 820
],
markLine : {
data : [
{type : 'average', name : '平均值'},
{type : 'max'},
{type : 'min'}
]
}
}
]
};
option2的更多相关文章
- ASP.NET Core 中文文档 第三章 原理(7)配置
原文:Configuration 作者:Steve Smith.Daniel Roth 翻译:刘怡(AlexLEWIS) 校对:孟帅洋(书缘) ASP.NET Core 支持多种配置选项.应用程序配置 ...
- windows7命令帮助大全
有关某个命令的详细信息,请键入 HELP 命令名ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- Objective-C开发编码规范【转载】
概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...
- 2013 duilib入门简明教程 -- 复杂控件介绍 (13)
首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图: 然后将Name属性改成其他名字, 不能是[控件名+UI+数字]这种,因为这是DuiDesigner ...
- bootstrap-material-design-个人总结
bootstrap-material-design-个人总结: 所需框架:1.boostrapt 3.0+2.jQuery 1.9.1+ 项目目录:Material/├── css/│ ├── boo ...
- 列表屏幕(List Screen)
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- WPF -Enum的三种绑定方法
一.使用ObjectDataProvider <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentat ...
- Bootstrap CSS 表单
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...
随机推荐
- 推荐csdn里的几篇activiti基础入门及提高的博客
昨天有个网友加qq询问我有没有非maven搭建的activiti项目的demo,因为我博客中写了一个用maven,我当时没有,于是晚上回家尝试了一下,结果比较容易就实现了. 之后和那个网友聊了一下,他 ...
- PHP里的“夏令虫”
转自:http://www.2cto.com/kf/201308/235073.html 今儿,我遇到一个大怪物 -- 夏令虫 ╮(╯▽╰)╭,学艺不精,因为他掉进大坑里去了.坑是这样挖的: 以前,我 ...
- Tomcat 使用apr优化
最近业务服务器出现了一些问题,Nginx傲娇了,准备把加Nginx插件上的一些处理逻辑扔到后端的Tomcat的业务处理里面去,考虑到tomcat目前本来就压力山大,所以弄了弄apr库来优化tomcat ...
- Spark往Elasticsearch读写数据
def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setAppName("DecisionTre ...
- Bootstrap for MVC:Html.Bootstrap().TextBoxFor(model=>model.Name)
在上篇博文中提到最近比较忙,也打过招呼Orchard系列文章更新速度可能会放缓,但还是会继续写下去,主要原因在最近想着开发一个新的东西(系统?组件?),等有一定成果时会跟大家分享一些相关的东西,今天介 ...
- CRM JS 设置lookup字段 setSimpleLookupValue
function setSimpleLookupValue(LookupId, Type, Id, Name) { /// <summary> /// Sets the value for ...
- logstash 因为jdk版本不对造成索引时间戳失败
版本 logstash 1.5.0 RC2 JDK 1.7.15 Logstash推荐使用JDK 1.7.75 每次启动都是会有部分的数据无法替换日志中的时间戳,导致日志时间戳被认定为当前读取时间. ...
- java和Javascript的区别
1 首先,这两个家伙没有任何的血缘关系,java是是由Sun 公司于1995年5月推出的,而javascript是于1995年由Netscape公司设计实现而成的,由于Netscape公司与Sun公司 ...
- 国际化(i18n)
一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
- linux文件上传
租了个服务器,要把自己打的war包打上去发布,服务器是linux的(本机是mac).以前都是用wget命令,把需要上传的东西先放到github上面再在服务器上用wget命令下载.最近不知道什么原因,w ...