平时做堆叠图比较多,但是今天遇到一个要做重叠图的需求,记录一下~

1、堆叠图,对应的 series: [] ,需要设置一个stack: "1",其中每个堆叠图的stack属性值都要保持一致,如下:

groupSeriesData: [{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
}, {
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
}]

2、重叠图,对应的 series:[],需要设置 barGap: '-100%',如下:

groupSeriesData: [{
name:'联盟广告',
type:'bar',
barGap: '-100%',
data:[220, 182, 191, 234, 290, 330, 310]
}, {
name:'视频广告',
type:'bar',
barGap: '-100%',
data:[150, 232, 201, 154, 190, 330, 410]
}]

  

echarts —— 重叠图的更多相关文章

  1. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  2. Echarts 甘特图教程

    Echarts甘特图教程  echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xEYpsVs30s 效果:  代码: <html& ...

  3. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  5. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  6. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  7. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  8. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  9. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

随机推荐

  1. web worker 的 self

    A self object, which is the global object representing the worker in this scope. 对self对象的译法,未知妥否. // ...

  2. delphi中Treeview的使用介绍

    今天重点学习了TreeView的使用方法,基本的已经写了,现在主要想说的是如何显示数据库的资料,今天只是做了个较简单的例子,一个父节点下显示数据库中某个field的值.代码如下: procedure ...

  3. php-fpm 重启

    查看php-fpm进程数:ps aux | grep -c php-fpm [root@ssy106c14c190c69 etc]# ps -ef | grep php-fpm ---  查看php- ...

  4. 4.git的基本命令

    版本库 index 暂存区,HEAD 将来1.0,2.0的指向  多次add,一次commit 每次commit一次,head就指向了最新的版本.head是回退版本的时候会用到 一般有开发的分支,ma ...

  5. 申请 Let's Encrypt 通配符 HTTPS 证书

    目录 一.背景知识 1.1.什么是通配符证书 1.2.什么是 Let's Encrypt 二.证书申请(certbot) 2.1.系统确定 2.2.工具安装 2.3.证书申请 2.4.证书查看 2.5 ...

  6. 【Qt开发】关于QWSServer

    QWS Server QT Embeded应用没有来严格的区分server和client进程,如果一个QT进程的启动参数中有-qws,那么这个进程就具有server管理功能,被称为QWS server ...

  7. GxDlms编译

    目录 GxDlms编译 title: GxDlms编译 date: 2019/12/5 13:36:37 toc: true --- GxDlms编译 C++版本如果要编译动态库,项目>属性需要 ...

  8. jquery设置input不可编辑,背景变灰,鼠标变禁止

    先看效果 $("#id").attr("onfocus", "this.blur()"); $("#id").css(& ...

  9. [mysql] C++操作mysql方法

    下载:http://mirrors.sohu.com/mysql/MySQL-5.5/ From: http://www.cnblogs.com/magicsoar/p/3817518.html C+ ...

  10. lua语法介绍(二)

    一.语法简要 在学习任何语法之前,我们都需要知道该门语言是怎样定义的,是怎样运行的,话说白了,就是到了人家的山头得唱人家山头的歌.下面介绍lua的语法 1.变量的定义 特点: 1.变量在使用前必须声明 ...