Echarts：双折线图的值一样，高度却不一样

最新推荐文章于 2024-12-06 16:42:32 发布
原创 最新推荐文章于 2024-12-06 16:42:32 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

文章讨论了在Echarts中绘制双折线图时遇到的问题，即两条线在相同横坐标下高度不一致。原因在于数据堆叠导致的值叠加。解决方案是移除或设置不同stack属性值以分开显示两条线的数据。

问题

  • 在使用Echarst绘制双折线图的时候，2条线在相同的横坐标下，y轴的值是一样的，但是展示在图上的时候2条折线在那个横坐标值下的高度却不一样
  • 即x=x1时，y1=2，y2=2，但是显示在图上的却是：x=x1时，y1=2，y2=4

解决

  • 由于展示在图上y2的值是2个y值的和，因此猜测是数据堆叠了。即后一个系列的折线对应的值会在前一个系列的折线上的值上相加。
  • 与堆叠有关的是stack属性
  • 查找代码，发现2条折线都设置了stack并且值相同，因此把stack去掉，或者给2个stack设置不同的值就解决了
    在这里插入图片描述
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（一）
总结前端开发中遇到的问题，分享前端知识
04-12 5009
element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4581
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
Echarts在一个容器中绘制多张横向条形统计图
weixin_38974419的博客
01-18 2303
今天做项目中的一个图表统计时遇到一个问题 ：这个图表有3个横向的条形统计图组成，起初是写了3个容器分别在里面绘制各自的横向条形统计图，用模拟的动态数据时没有任何问题，当接入后台数据后发现，如果有两个图表的数据都为空时(尤其是第二个和第三个图表数据同时为空时)，数据更新后重新配置并绘图，会存在后两个图表Echarts实例丢失问题，也就是后两个容器中并不会绘图出来。所以，转变思路，在一个容器一个图层上...
完美解决多个Echarts图表自适应窗口、父容器宽高，并进行性能优化
前端小白, 稀土：雩风十六
07-25 6647
很多时候我们会在绘制echarts图表时，使用以下方法监听浏览器尺寸变化，让图表resize()完成响应式然后，有些时候，比如在B端，经常会有侧边栏的宽度变化影响我们工作区各种div的尺寸自动变化，这时候就迫切地需要echarts能够随父容器尺寸变化而响应式调整自身尺寸。
eCharts X轴文字过长解决办法
EsquireY的博客
08-19 706
1,文本倾斜 axisLabel: { color: "#fff", rotate: "30", // 倾斜角度 版本4.0以后配置直接写在 axisLabel } 换行显示 axisLabel:{ formatter: function(params) { var newParamsName = ""; // 最终拼接成的字符串 var paramsNameNumber = params.length; // 实际标签的个数 var p
解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）
huangfuyk.的博客
06-25 9035
解决办法：在series里选择一条数据，给其label的position赋值为“top”或“bottom”，与另一个进行区分。 示例代码如下： option = { backgroundColor: '#080b30', title: { text: '', textStyle: { align: 'center', color: '#fff', fontSize: 20, .
解决Echarts 折线图、柱状图数据大小差距过大，导致图形高低差距太大的问题（type:log）
热门推荐
yanxiaomu的博客
02-28 2万+
Echarts 是百度开源的一款 web 数据可视化类库，渲染基于web canvas。 本文中的所有代码都可以在 Echarts在线试用中调试。 1.问题产生 本文主要是为了解决折线图、柱状图数据大小差距过大，导致图形高低差距太大的问题以及相关展示问题，如下图： option = { tooltip: { trigger: "axis", }, xAxis: { boun...
echarts 实现区域划分 折线图
晨曦月的博客
11-26 4389
先给出图表样式 这张图看上去是个普通的折线图，但是仔细看又有一些不同，首先它是有区域划分的，不同区域，对应的线条颜色不一样，其次y轴是自定义的，还有各种标记等，总之是有很多构思在里面。 echarts图例当中找了很多相似的折线图，但是都不能满足需求，于是动手自己绘制。 废话不多说，直接上代码，小伙伴们可以参考下： let dom = document.getElementById("ichart"); dom.style.width = window.innerWidth / 4 + "px";
echarts图表折线图触发弹窗x轴对应项不显示背景色
花椒和蕊的博客
02-24 1161
最近配置折线图图表，鼠标经过折线的任意一段，会显示弹窗，同时会有蓝色区域的背景色。想要取消蓝色背景 tooltip: { trigger: ‘axis’, show:true, backgroundColor: ‘none’, padding: 5, axisPointer: { type:‘none’ }, axisPointer:{ type:'line', lineStyle:{ color:'red ',
echarts为折线图是line 不是折线图呢
最新发布
10-21
## ✅ 回答核心：为什么叫 `'line'` 却是“折线图”？ ```js series: [{ type: 'line', data: [10, 20, 15, 25] }] ``` - `type: 'line'` 在 ECharts 中表示 **折线图（Line Chart）** - 它会把数据点用直线连接...
Vue学习-echarts图表高度随父容器高度动态变更
Java_Scholar0的博客
10-14 3497
echarts图表高度随父容器高度动态变更
echarts-折线图 -多折线但数据长度不一的option设置
weixin_38620095的博客
08-26 2321
使用dataset 和 datasetIndex option = { legend: {}, tooltip: {}, dataset: [ { dimensions: ['date', 'A'], source: [ ['8/1', 1.1], ['8/2', 1.2], ['8/3', 1.25],
echarts踩坑之路之折线图多条线数据一样纵坐标却对应不一样
在路上`的博客
12-06 673
用于数据堆叠，同个类目轴上，系列配置相同的stack，后一个系列的值会加在前一个系列之后。通俗一点讲就是：当两条线数值相近时，后面的值会在前一个系列的值上面叠加。从而就出现了线和值对不上的情况。去掉 stack 或者每个系列使用不同的 stack 值。方案一：把 stack 配置注释掉。方案二：stack 给不同的值。
echart 多图表调用resize时宽高不正确
xzhlg57656的博客
05-05 1217
使用 echarts 的 resize 时，多个图表时会出现高度/宽度计算不正确的情况
echarts折线图多条线不同的线不同的的单位
wang20y8的博客
06-03 5564
JS代码： opt3={ grid:{ top:50, right:20, bottom:30, left:60 }, tooltip : { formatter...
Echarts折线图、柱状图X轴下文字区域高度设置以及文字过长展示不全
weixin_41346436的博客
06-04 9545
Echarts折线图、柱状图X轴下文字区域高度设置以及文字过长展示不全 没设置之前，且文字是一行，换行效果是做了处理 处理X轴下方距离左右滑块的距离问题grid属性 //为了更直观的显示设置的位置，grid 跟 legend 同一层 grid:{ //直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 ri
echarts中的canvas画布大小与容器大小不一致
m0_71933288的博客
05-16 1475
我们在放置echarts统计图容器外添加一个标签并设置我们想要的宽高，再将容器内的。就可以让canvas画布与容器大小一致了。
echarts的3D饼图高度问题
weixin_46115860的博客
07-13 6976
echarts3D饼图的高度问题
echart折线图例配置，折点配置、最高值最低值设置
qq_47629187的博客
05-29 1276
现在的大屏要求的折线图是不是越来越花里胡哨了，最近我做大屏项目的时候又遇到了这中图，既然用到这么频繁那就分享给大家。如下图：图例和折线图折点要求这样，用到了图例的一些配置属性那他转化成icon，还有symbolSize（图片大小），symbol（图片）这两个配置属性控制折点的样式，相关代码如下注：需要吧图片转成base64的格式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值