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

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. Winform中利用委托实现窗体之间的传值

    点击打开按扭,打开传输值窗体 public partial class Form1 : Form { public Form1() { InitializeComponent(); } public ...

  2. cls只能调用一次实例 第二次None

    class Zarten(): _singleton = None def __new__(cls, *args, **kwargs): print('__new__') if not cls._si ...

  3. ELK的安全解决方案 X-Pack(1)

    安装 X-Pack 前必须安装 elasticsearch. Kibana.logstash,因为之前安装ELK选择的版本都是5.4.1,所以这次选择X-Pack的版本也要是5.4.1的 第一步:下载 ...

  4. epoll简介 与 UDP server的实现

    Abstractepoll是Linux内核为处理大批量句柄而作了改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著减少程序在大量并发连接中只有少量活跃的情况下的系 ...

  5. android ONVIF 组播探测在线摄像机

    http://blog.csdn.net/ghostyu/article/details/8182516 Android的Wifi,默认情况下是不接受组播的,见:http://developer.an ...

  6. protobuf ubuntu 18.04环境下安装

    (t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@lu ...

  7. 使用浏览器连接Linux服务器

    wssh 可以让我们通过 HTTP 来调用远程的一个 shell,也就是说我们可以用浏览器来访问某个 Linux 服务器/虚拟机的终端(只要这个服务器上运行了 wsshd 服务器端).wssh 客户端 ...

  8. 15 Flutter仿京东商城项目 搜索页面布局

    Search.dart import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAd ...

  9. 在Mac 搭建robotframework 环境

    折腾来一下午,遇到了好多坑 坑 1.不要用pip 下载wxpython 2.不要用mac自带的python 3.不要自己下载wxpython 步骤: 1. 安装homebrew, /usr/bin/r ...

  10. JAVA 基础编程练习题23 【程序 23 求岁数】

    23 [程序 23 求岁数] 题目:有 5 个人坐在一起,问第五个人多少岁?他说比第 4 个人大 2 岁.问第 4 个人岁数,他说比第 3 个 人大 2 岁.问第三个人,又说比第 2 人大两岁.问第 ...