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的更多相关文章

  1. ASP.NET Core 中文文档 第三章 原理(7)配置

    原文:Configuration 作者:Steve Smith.Daniel Roth 翻译:刘怡(AlexLEWIS) 校对:孟帅洋(书缘) ASP.NET Core 支持多种配置选项.应用程序配置 ...

  2. windows7命令帮助大全

    有关某个命令的详细信息,请键入 HELP 命令名ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库 ...

  3. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  4. Objective-C开发编码规范【转载】

    概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...

  5. 2013 duilib入门简明教程 -- 复杂控件介绍 (13)

      首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图:           然后将Name属性改成其他名字,          不能是[控件名+UI+数字]这种,因为这是DuiDesigner ...

  6. bootstrap-material-design-个人总结

    bootstrap-material-design-个人总结: 所需框架:1.boostrapt 3.0+2.jQuery 1.9.1+ 项目目录:Material/├── css/│ ├── boo ...

  7. 列表屏幕(List Screen)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. WPF -Enum的三种绑定方法

    一.使用ObjectDataProvider <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentat ...

  9. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

随机推荐

  1. 推荐csdn里的几篇activiti基础入门及提高的博客

    昨天有个网友加qq询问我有没有非maven搭建的activiti项目的demo,因为我博客中写了一个用maven,我当时没有,于是晚上回家尝试了一下,结果比较容易就实现了. 之后和那个网友聊了一下,他 ...

  2. PHP里的“夏令虫”

    转自:http://www.2cto.com/kf/201308/235073.html 今儿,我遇到一个大怪物 -- 夏令虫 ╮(╯▽╰)╭,学艺不精,因为他掉进大坑里去了.坑是这样挖的: 以前,我 ...

  3. Tomcat 使用apr优化

    最近业务服务器出现了一些问题,Nginx傲娇了,准备把加Nginx插件上的一些处理逻辑扔到后端的Tomcat的业务处理里面去,考虑到tomcat目前本来就压力山大,所以弄了弄apr库来优化tomcat ...

  4. Spark往Elasticsearch读写数据

    def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setAppName("DecisionTre ...

  5. Bootstrap for MVC:Html.Bootstrap().TextBoxFor(model=>model.Name)

    在上篇博文中提到最近比较忙,也打过招呼Orchard系列文章更新速度可能会放缓,但还是会继续写下去,主要原因在最近想着开发一个新的东西(系统?组件?),等有一定成果时会跟大家分享一些相关的东西,今天介 ...

  6. CRM JS 设置lookup字段 setSimpleLookupValue

    function setSimpleLookupValue(LookupId, Type, Id, Name) { /// <summary> /// Sets the value for ...

  7. logstash 因为jdk版本不对造成索引时间戳失败

    版本 logstash 1.5.0 RC2 JDK 1.7.15 Logstash推荐使用JDK 1.7.75 每次启动都是会有部分的数据无法替换日志中的时间戳,导致日志时间戳被认定为当前读取时间. ...

  8. java和Javascript的区别

    1 首先,这两个家伙没有任何的血缘关系,java是是由Sun 公司于1995年5月推出的,而javascript是于1995年由Netscape公司设计实现而成的,由于Netscape公司与Sun公司 ...

  9. 国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  10. linux文件上传

    租了个服务器,要把自己打的war包打上去发布,服务器是linux的(本机是mac).以前都是用wget命令,把需要上传的东西先放到github上面再在服务器上用wget命令下载.最近不知道什么原因,w ...