echarts堆叠图添加总量
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堆叠图添加总量的更多相关文章
- Echarts 关系图 添加点击事件
/*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...
- echarts堆叠图计算总数和各部分
app.title = '堆叠条形图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type ...
- echarts堆叠图展示,根据数据维度的粒度判断是否展示数据
1.定义一个参数,返回根据判断什么条件是否显示值; 2.var a = '<%=(String)request.getAttribute("type")%&>' ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts BAR堆叠图显示百分比
在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据, ...
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
随机推荐
- 在Ubuntu上搭建kindle gtk开发环境
某个角度上说,kindle很类似android,同样的Linux内核,同样的Java用户层.不过kindle更注重简单.节能.稳定.Amazon一向认为,功能过多会分散人们阅读时候的注意力. Kind ...
- Python读写文件你真的了解吗?
内容概述 Python文件操作 针对大文件如何操作 为什么不能修改文件? 你需要知道的基本知识 1. Python文件操作 这一部分内容不是重点,因为很简单网上很多,主要看看文件操作的步骤就可以了. ...
- 初学Java Web(3)——第一个Servlet
这学期 Java Web 课程的第一节课就简短复习了一下 Java 的一些基础知识,所以觉得 Java 的基础知识还是很重要的,但当我想要去写一篇 Java 回顾的文章的时候发现很难,因为坑实在太多了 ...
- GraphQL 的前世今生
GraphQL是什么 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一 ...
- dnSpy 强大的.Net反编译软件
作者:D.泡沫 一说起.net的反编译软件,大家首先想到的就是Reflector,ILSpy,dotPeek等等.而dnSpy同样是一款优秀的反编译软件,同时它是开源免费的.官方的描述是: dnSpy ...
- Java开发知识之Java的正则表达式
目录 正则表达式 一丶什么是正则表达式 1.正则表达式简介 2.无正则表达式判断代码 3.使用正则表达式代码. 二丶正则表达式API 三丶正则表达式语法格式 1.正则表达式语法 正则表达式 一丶什么是 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能
不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...
- js内存深入学习(一)
一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构 堆 ...
- vb.net C# AtlAxGetControl 函数使用方法
先省略一万字的坑坑坑 找遍了互联网既然没搜索到相关资料 一定是我搜索的方法有问题 下面简单几句代码 第一种方法 Public Declare Function AtlAxGetControl Lib ...
- Mysql is null 索引
看到很多网上谈优化mysql的文章,发现很多在谈到mysql的null是不走索引的,在此我觉得很有必要纠正下这类结论.mysql is null是有索引的,而且是很高效的,(版本:mysql5.5)表 ...