Echart 堆叠stack存在负数时画图有偏差

最新推荐文章于 2024-04-08 10:54:14 发布
最新推荐文章于 2024-04-08 10:54:14 发布
阅读量1.7k 收藏 2
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59354754/article/details/120020401
版权
在Echarts绘制堆叠图时遇到负数情况导致的画图偏差问题。正数堆叠正数，负数堆叠负数的规则不满足需求。解决方案包括修改Echarts源码和数据平移法，通过取数据负的最小值为基点，平移数据使其全部为正，同时调整Y轴刻度，实现正负数相加的堆叠效果。该方法适用于保持正负数堆叠一致性的场景。
摘要由CSDN通过智能技术生成

有个需求需要画Echarts的堆叠图，如Echars示例
https://echarts.apache.org/examples/zh/editor.html?c=area-stack。

ehcarts堆叠图需要每条折线设置相同的stack，设置data之后，后一个series会加上前面series的值。如下图所示，第一条折线的第一个数据是120，第二条折线的第一个数据是220但是画在了120+220=340的位置，第三条折线的第一个数据是150画在了120+220+150=490的位置。以此类推其他数据点都是这样

在这里插入图片描述

Echarts的堆叠规则，是正数堆叠正数，负数堆叠负数。
用Echarts的示例，将第一条折线第一个数据改为负数（-120），第二条数据就会画在220的位置了。

但是我的需求是要画在220-120=100的位置，也就是不管正负通通都是后一个series加上前面的series
在这里插入图片描述

解决方案：
①修改ehcarts的文件，注释掉部分代码，即正数和正数相加，负数和负数相加的逻辑

  // if (sum >= 0 &a
最低0.47元/天 解锁文章
雾不知
关注
可以用负数的曲线图.e
12-19
易语言可以用负数的曲线图源码
echarts数据堆叠 存在负值数据不正确 问题解决方案
weixin_41668951的博客
08-11 5160
设置 stack 后，数据堆叠可显示阴影图，但数据同时存在正值和负值时，堆叠后 负值会消失。 解决方法： 在数据中添加base值，实际值、下界值 +base ，y轴值 -base 即可。 代码： let base = -this.data.reduce(function (min, val) { return Math.floor(Math.min(min, val.yhat_lower)); }, Infinity); yAxis: { axisLabel: {
echarts 堆叠分组显示 + echarts 画布初始化大小（js计算高度 设置）+echarts数据初始化
夏小球的博客
05-22 2067
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <...
使用echarts实现动态的正负轴堆叠柱状图
yookooi
06-16 1584
ECharts是一个基于JavaScript的开源可视化库，它可以帮助用户创建各种类型的图表，例如线图、饼图、散点图和柱状图等等。ECharts提供了非常方便的API，可以帮助你轻松自定义你的图表，并且可以使用JSON格式的数据进行配置。
echarts 自定义误差图
贵林之恋的博客
08-21 2388
&lt;script&gt; $(function() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var categoryData = []; //X轴数据 var errorDat...
echarts中的stack参数
热门推荐
renaissance79的博客
03-22 1万+
在echarts中series里有个参数stack： 用于数据堆叠，同个类目轴上，系列配置相同的stack，后一个系列的值会加在前一个系列之后，如图： series部分代码： series: [{ type: 'bar', stack: 'Total1', itemStyle: { borderColor: 'transparent', color: 'transparent' }, emphasis: { itemSt
堆叠PowerStack封装电流获得更高功率POL-综合文档
05-25
堆叠PowerStack封装技术可以提升POL的电流能力，从而获得更高的功率输出，这对于需要高功率密度和高效率的应用至关重要。 3. 电流获得和功率提升：在电子系统中，电流的获得对于系统性能至关重要。通过集成和堆叠...
堆叠图_echarts_柱状堆叠图_
09-29
堆叠柱状图在业务分析、市场研究等领域有广泛的应用，比如分析不同产品的销售比例、不同地区的用户分布等。通过堆叠柱状图，我们可以直观地理解各个部分如何共同构成整体，以及各部分之间的相对大小关系。在实际应用...
echarts横向堆叠柱状图.zip
10-11
当为多个系列设置相同的 `stack` 值时，它们将在同一堆栈中堆叠。例如： ```javascript option = { xAxis: { type: 'category', // X轴类型为分类轴 data: ['类别1', '类别2', '类别3'] // 分类数据 }, yAxis:...
华为交换机堆叠
12-26
2. **备用交换机(Standby)**: 在主交换机出现故障时接管主交换机的功能，每个堆叠系统中同样只能有一个备用交换机。 3. **从交换机(Slave)**: 除主交换机和备用交换机之外的其他交换机都属于从交换机。 #### 三、堆...
下一代Chip Stack技术将使双层堆叠SiP厚度缩小到0.5mm
11-28
传统的SiP技术通常将多个裸片堆叠在一起，但这种堆叠方式导致了整体封装的厚度增加。目前，瑞萨科技的双层堆叠SiP厚度为1.2mm，而他们计划通过新一代技术将其降低到1.0mm，最终目标是0.5mm。这一技术的发展将推动...
echarts折线图负值时areaStyle区域色始终在折线下方(负值时会自动在上方)
个人博客
02-09 2839
无
Echarts 偏移，柱状图偏移，散点图偏移，折线图偏移
虎康的博客
05-12 7994
这个比较难受，官方也有symbolOffset属性，不过使用之后发现：线没偏移，线上的点儿偏移了。动态增加了一个隐藏的x轴（show：false），用来引导折线图的点的位置，核心代码。所以，这个属性不知道有什么用处。
使用echarts遇到的问题及解决
~~~
05-04 6976
大家好，我是南木元元，热衷分享有趣实用的文章。echarts是目前非常流行的一个开源可视化图表库，本文就来分享一下我在使用echarts中所遇到的问题以及是如何解决的。
Echarts折线图数据从负数开始
webtext的博客
01-19 1487
Echarts折线图数据从负数开始
数据可视化高级技术Echarts(堆叠柱状图)
m0_63181360的博客
04-08 5022
下面定义了五种数据，分别定义了五个不太的名字来设定，再分别在各个数据下设定stack（名称为total）更改为三列，即设置三个不同的stack名称（total，total11，total22）即在series中将设置stack即可。其他设置与普通柱状图相同，语法：相同名称的数据会堆叠起来，不同则会新生成一列。数据堆叠，同个类目轴上系列配置相同的。相同（相同的堆叠，不同的新生成一列）stack名称相同（直接堆叠）类型的类目轴上，不持。stack:"名称"
设置echarts中折线图中数据根据正负数显示不同区域背景色
Tmengxing的博客
01-11 2135
代码: option = { backgroundColor: "#030A41", xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { show: false, }, axisLabel: { //设置x轴坐标配置 margin: 10, color: '#f
Echarts中的series设置stack参数
qq_41700374的博客
02-13 1万+
Echarts中series设则stack参数
echarts 散点图实现正负值颜色不同，方向不同
huhuhuja
01-11 922
效果如图： 核心代码： const { RtimeList, RList, sList, $utils } = this; series: [ { type: "scatter", data: RList.map((item) => { return { value: item, symbol: "triangle", .
echart 堆叠柱状图
最新发布
08-21
在ECharts中创建堆叠柱状图，首先需要引入ECharts库，然后使用`echarts TreeMap`组件，设置`stack`属性为`true`以开启堆叠模式。示例代码如下： ```javascript var myChart = echarts.init(document.getElementById...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值