1.多个柱子堆叠效果,多用于各部分占比

app.title = '坐标轴刻度与标签对齐';

option = {
    title : { //标题
            x : 'center',
            y : 5,
            text : '占比图'    //换行用 \n
        },
    legend : { //图标
            show : true,
            x : 'center',
            y : 30,
            itemGap : 10,
            itemWidth : 30,
            itemHeight : 10,
            data : ['one','two','three']
        },
    color: ['#3398DB'],//  柱状图颜色

    tooltip : { //鼠标悬停提示内容
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: { //布局   控制图的大小,调整下面这些值就可以
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
        //y2 : 40
        // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
    },
    xAxis : [ //X轴
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [ //Y轴
        {
            type : 'value'
        }
    ],
    series : [ //用于指定图标显示类型
        /*{
            name:'直接访问',  //柱子的名称
            type:'bar',       //类型
            barWidth: '60%',  //宽度
            data:[10, 52, 200, 334, 390, 330, 220]
        },*/

        {
            name : 'one',
            type : 'bar',
            stack : '占比',
            barWidth: '60%',  //宽度
            barMaxWidth:100,//柱子最大宽度
            itemStyle : { //设置柱子总体内容
                normal : {
                    color : 'rgba(139,26,26,1)',  //柱子颜色
                    borderType : 'dashed',
                    barBorderRadius:[10, 10, 10, 10], //柱子圆角
                    label : { //设置柱子上面的内容
                        show : false, //数据是否显示在柱子上
                        position : 'inside',
                        offset : [ 0, 0 ],
                        formatter : '{c}',  //如果是百分比:formatter : '{c}%',
                        textStyle : {//字体内容设置
                            color : '#000000',
                            fontStyle : 'normal',
                            fontWeight : 'normal',
                            fontFamily : 'sans-serif',
                            fontSize : 6
                        }
                    }
                }
            },
            data : [10, 52, 200, 334, 390, 330, 220]
        }, {
            name : 'two',
            type : 'bar',
            stack : '占比',
            barMaxWidth:100,
            itemStyle : {
                normal : {
                    color : 'rgba(205,38,38,1)',
                    borderType : 'dashed',
                    barBorderRadius:[10, 10, 10, 10],
                    label : {
                        show : true,
                        position : 'inside',
                        formatter : '{c}%',
                    }
                }
            },
            data : [10, 52, 200, 334, 390, 330, 220]

        }, {
            name : 'three',
            type : 'bar',
            stack : '占比',
            barMaxWidth:100,
            itemStyle : {
                normal : {
                    color : 'rgba(205,38,38,0.5)',
                    barBorderRadius:[10, 10, 10, 10],
                }
            },
            data : [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

echarts使用笔记二:柱子堆叠的更多相关文章

  1. echarts使用笔记三:柱子对比

    app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '对比图' //换行用 \n }, le ...

  2. 深入浅出ECharts系列 (二) 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  3. amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  4. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  5. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  6. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  7. Python 学习笔记二

    笔记二 :print 以及基本文件操作 笔记一已取消置顶链接地址 http://www.cnblogs.com/dzzy/p/5140899.html 暑假只是快速过了一遍python ,现在起开始仔 ...

  8. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  9. webpy使用笔记(二) session/sessionid的使用

    webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...

随机推荐

  1. IPerf——网络测试工具介绍与源码解析(5)

    本篇随笔讲述一下TCP协议下,双向测试模式和交易测试模式下客户端和服务端执行的情况: 双向测试模式: 官方文档的解释 Run Iperf in dual testing mode. This will ...

  2. 表单取消历史保存之autocomplete的用法

    表单取消历史保存之autocomplete的用法 应用场景 浏览器开启了表单自动填充设置后,有些表单中的input元素在添加时会以下拉的形式显示以前填写过的表单,有时候可能会影响用户的使用.比如:da ...

  3. JavaScript -- 时光流逝(六):js中的正则表达式 -- RegExp 对象

    JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义      查找以八进制数 规定的字符.     查找以十六进制数 规定 ...

  4. 028实现strStr()

    #pragma once #include "000库函数.h" /*********************自解**************/ //使用算法中的find 12ms ...

  5. 英语进阶系列-A03-英语升级练习一

    古诗背诵 要求:根据诗句,先翻译成现代文,然后绘制图像. 词汇系列 要求:认真朗读单词,然后通过该单词联想2个词汇,然后给每个单词造句. 例子:class班级,联想到了classroom教室,clas ...

  6. 《Java大学教程》—第9章 软件质量

    软件质量:可维护性.可靠性.健壮性.可用性. 9.3 可维护性系统维护(maintaining)是指根据需求的变化更新现有系统的过程 9.3.1    封装的重要性连锁反应:对系统某一部分的改变可能会 ...

  7. python 浅谈字典dict

    一.字典简介 字典(dict)是python中唯一的映射类型,他是以{ }括起来的键值对组成,在dict中的key是唯一的.在保存的时候,根据key来计算出一个内存地址.然后将key-value保存在 ...

  8. 如何设计一个"好的"测试用例?

    什么才算是“好的”测试用例? 好的测试用例一定是一个完备的集合,它能够覆盖所有等价类以及各种边界值,而跟能否发现缺陷无关. "好的"测试用例必须具备哪些特征? 一个“好的”测试用例 ...

  9. CentOS7使用DevStack快速搭建OpenStack实验环境

    安装环境:centos7系统下安装devstack 一.下载Ubuntu14或者Centos7安装(实体机或者虚拟机都可以),建议选择最小安装镜像即可. 二.安装devstack 文档地址 http: ...

  10. IO的详细解释:It's all about buffers: zero-copy, mmap and Java NIO

    There are use cases where data need to be read from source to a sink without modification. In code t ...