echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图

堆叠是在柱状图的基础上,给几项设置同一stack来实现的。不考虑在tips中实现总和,有两种方式可以实现总和显示。

第一种:

  原理:在原本堆叠的柱状图基础上,再堆叠一项,其值是各项之和。显然,这样就会变成多出一个与下边高度相等的柱形。然后我们设置这一项的label的position为insideBotton(如果是左右横向分布则是insideLeft),这样总量就显示在了原始项的顶部。最后,我们设置总和项的颜色透明(rgba(128, 128, 128, 0))即可。

  优化:该方法会把原先的坐标给拉长两倍,即会有一半的区域是空白的没有图像的。比如,原先的总和是100,现在再加上一个100,就是一共200的刻度了。可以使用缩进,使图表整体向上(横向则是向右)缩进50%。对应的设置项是

grid: {
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true
}

第二种:

  原理:在原本堆叠的柱状图的旁边,再起一个总和的柱形,显然这个柱形和原本的柱形的高度是相同的,然后我们将其平移(barGap: '-100%'),使其与原本的柱形重合,这样,最终的效果就是一个柱形了,高度也不会加倍。

  优化:对于echarts的渲染,我们知道,是根据配置项绘制的canvas,而绘制的顺序就是我们代码书写的顺序。也就是说,如果我们将总和放在后边,那么就会是总和的柱形覆盖原本的柱形,原本柱形的颜色就看不到了。解决办法有2个:

  1.将总和放在前边绘制,使用堆叠来覆盖总和的柱形;

  2.总和在后边,设置总和的柱形的颜色为透明(同第一种方法中的设置)。

  除此之外,对于总和文字的显示,如果我们设置显示在外部,那么就可能会出现超出可见区域的现象,处理方法同第一种方案中,调整grid。另外,对于总和的label和原始数据的label,要设置不同的position来避免重叠。如果想要总和看起来明显一些,可以给总和的柱形添加一个border。对于数据个数比较多又容易出现0导致重叠的问题,可以采用下边的0不显示或者如果position已经没办法比较重叠时,可以使用拼接换行符、值先按比例放大以扩大图形争取到空间,在显示文字的时候再按同比例缩小以争取现在来解决。

附完整的option代码:

 let option = {
title: {
text: "当阳各学校招生情况",
subtext: ""
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["军人", "房产", "户口", "经商", "务工"]
},
grid: {
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
minInterval: 1
},
yAxis: {
type: "category",
data: []
},
series: [
{
name: "军人",
type: "bar",
stack: '总量',
data: [],
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: function(v) {
return v.value || ""
}
}
},
itemStyle: {
normal: {
color: 'red'
}
}
},
{
name: "房产",
type: "bar",
stack: '总量',
//barWidth: "50px",
data: [],
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: function(v) {
return v.value || ""
}
}
},
itemStyle: {
normal: {
color: 'orange'
}
}
},
{
name: "户口",
type: "bar",
stack: '总量',
data: [],
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: function(v) {
return v.value || ""
}
}
},
itemStyle: {
normal: {
color: 'yellowgreen'
}
}
},
{
name: "经商",
type: "bar",
stack: '总量',
data: [],
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: function(v) {
return v.value || ""
}
}
},
itemStyle: {
normal: {
color: 'green'
}
}
},
{
name: "务工",
type: "bar",
stack: '总量',
data: [],
label: {
normal: {
show: true,
position: 'insideLeft',
formatter: function(v) {
return v.value || ""
}
}
},
itemStyle: {
normal: {
color: 'cornflowerblue'
}
}
},
{
name: '总计',
type: 'bar',
stack: '总计',
barGap: '-100%',
label: {
normal: {
show: true,
position: 'right',
textStyle: { color: '#000' },
formatter: function(v) {
return "总计:" + (v.value)
}
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)',
borderWidth: 1,
borderColor: '#1FBCD2'
}
},
data: []
}
]
};

其中

v.value || ""
是为了避免数据为0时都重叠在一起的现象。

echarts堆叠图添加总量的更多相关文章

  1. Echarts 关系图 添加点击事件

    /*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...

  2. echarts堆叠图计算总数和各部分

    app.title = '堆叠条形图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type ...

  3. echarts堆叠图展示,根据数据维度的粒度判断是否展示数据

    1.定义一个参数,返回根据判断什么条件是否显示值; 2.var a = '<%=(String)request.getAttribute("type")%&>' ...

  4. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  5. echarts BAR堆叠图显示百分比

    在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据, ...

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

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

  7. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  8. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

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

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

随机推荐

  1. 在Ubuntu上搭建kindle gtk开发环境

    某个角度上说,kindle很类似android,同样的Linux内核,同样的Java用户层.不过kindle更注重简单.节能.稳定.Amazon一向认为,功能过多会分散人们阅读时候的注意力. Kind ...

  2. Python读写文件你真的了解吗?

    内容概述 Python文件操作 针对大文件如何操作 为什么不能修改文件? 你需要知道的基本知识 1. Python文件操作 这一部分内容不是重点,因为很简单网上很多,主要看看文件操作的步骤就可以了. ...

  3. 初学Java Web(3)——第一个Servlet

    这学期 Java Web 课程的第一节课就简短复习了一下 Java 的一些基础知识,所以觉得 Java 的基础知识还是很重要的,但当我想要去写一篇 Java 回顾的文章的时候发现很难,因为坑实在太多了 ...

  4. GraphQL 的前世今生

    GraphQL是什么 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一 ...

  5. dnSpy 强大的.Net反编译软件

    作者:D.泡沫 一说起.net的反编译软件,大家首先想到的就是Reflector,ILSpy,dotPeek等等.而dnSpy同样是一款优秀的反编译软件,同时它是开源免费的.官方的描述是: dnSpy ...

  6. Java开发知识之Java的正则表达式

    目录 正则表达式 一丶什么是正则表达式 1.正则表达式简介 2.无正则表达式判断代码 3.使用正则表达式代码. 二丶正则表达式API 三丶正则表达式语法格式 1.正则表达式语法 正则表达式 一丶什么是 ...

  7. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能

    不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...

  8. js内存深入学习(一)

    一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构  堆 ...

  9. vb.net C# AtlAxGetControl 函数使用方法

    先省略一万字的坑坑坑 找遍了互联网既然没搜索到相关资料 一定是我搜索的方法有问题 下面简单几句代码 第一种方法 Public Declare Function AtlAxGetControl Lib ...

  10. Mysql is null 索引

    看到很多网上谈优化mysql的文章,发现很多在谈到mysql的null是不走索引的,在此我觉得很有必要纠正下这类结论.mysql is null是有索引的,而且是很高效的,(版本:mysql5.5)表 ...