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

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. QString std::string 相互转 含中文

    std::string cstr;QString qstring; //QString str1 = " D:\\参考手册\\BIM\\osg\\build1.OSGB"; //从 ...

  2. distinct 排除重复 函数

    select count(distinct uid) from ib_user_settings; 参考: http://www.w3school.com.cn/sql/sql_distinct.as ...

  3. python3 高级编程(二) 动态给类添加方法功能

    class Student(object): pass 给实例绑定一个属性: >>> s = Student() >>> s.name = 'Michael' # ...

  4. 反向代理远端 单台tomcat 使用域名代理

    .环境 nginx 10.1.1.161 公网:123.58.251.166 tomcat 10.1.1.103 .远端tomcat 配置 [root@host---- ~]# netstat -tn ...

  5. GBDT详解例子

    https://blog.csdn.net/zpalyq110/article/details/79527653

  6. Flutter Swiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter_swiper的GitHub地址:https: ...

  7. ssh自动添加hostkey到know_hosts

    The authenticity of host ‘git.sws.com (10.42.1.88)’ can’t be established. ECDSA key fingerprint is 5 ...

  8. Nginx 开启支持谷歌Brotli压缩算法

    参考链接:https://cloud.tencent.com/developer/article/1501009

  9. tomcat8.5.37设置虚拟目录

    之前做的solr和tomcat是放在tomcat的webapps下 solr7.2.1+tomcat8.5.37+jdk8安装配置 现在就是放在其他,通过tomcat的server.xml配置虚拟目录 ...

  10. POJ2513 【并查集+欧拉路径+trie树】

    题目链接:http://poj.org/problem?id=2513 Colored Sticks Time Limit: 5000MS   Memory Limit: 128000K Total ...