echarts绘制图表，容器宽度设置百分比， 图表缩在一起

最新推荐文章于 2024-04-30 10:24:08 发布
最新推荐文章于 2024-04-30 10:24:08 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： echarts 文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_cai_csdn/article/details/107935710
版权

原因：容器元素设置了display: none属性，所以echarts无法获取到容器的宽高值。例如容器设置100%，图表实际宽度只有100px。

解决方法：

1. 根据自身需求动态设置宽高

mychart.resize({

      width: $(window).witdth(),

      height: $(window).width(),

})

2. 给容器宽高设置定值

南方姑娘-qing
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于Echarts图表在div动态切换时不显示的解决方式
10-15
为了解决这个问题，确保Echarts的容器具有固定像素宽度而非百分比宽度，例如设为`600px`，这可以帮助Echarts在页面加载时准确计算图表尺寸。 总之，处理Echarts图表在div动态切换时不显示的问题，关键在于确保图表...
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 2079
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
Echarts容器宽高为百分比，图表展示不全
RequesToGod的博客
05-13 3240
Echarts设置宽高，图表仍展示不全问题 问题示例如下： 代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。 出现该问题的原因： 1、高度固定，宽度百分比 2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。 解决方案： 1、重新调用图表绘制函数。 2、调用Echats实例的resize()方法。 ...
echarts笔记篇——图表的大小如何调整
最新发布
m0_49471668的博客
04-30 1875
里面，通过改变radius和center的大小值就可以调整大小。2、柱状图和折线图的大小通过调整。
echarts宽度如何设为百分比
彤云望月
06-29 3654
前言 问题 : 有八个饼状图要展示，其中一行展示两个饼状图。一开始是固定了宽度为450px，但到了宽屏上一行就会展示三个。 思路：于是想当然的想到将 width 设为 百分比，继承父组件的宽度。但是改完之后图缩到了一起，网上查了查，发现echarts源码中，计算宽度的时候将 100% parseInt -> 100px, 所以比如我改成了45%, 就会显示为 45px。 解决：最后查了各种博客，得到了解决方法，就是根据别的组件宽度来动态改变echarts图标的宽度。 代码 var width =
echarts容器宽高百分比
打工人
02-22 1187
今天写项目时echart的父元素宽高用的百分比,父元素的父元素宽高是用的height:calc(),刚开始是正常的,页面一刷新,echarts整个图都缩在一起了,用echarts.resize()没有用 原代码: echarts.setOption(option) window.addEventListener('resize', echarts.resize()) echarts.resize() 后来调试发现页面大小变化之后就能正常,只有通过触发window的resize事件才会正常 代码: echa
echarts设置宽高100%渲染出来为100px
A_ta_and_run的博客
07-08 3028
简单记录一下最近项目里遇到的echart宽高显示问题
可控制管道内动态水流及左侧融合echarts图表（并自适应屏幕）
10-13
在这个项目中，动态水流和ECharts图表都需要根据屏幕尺寸进行适配，确保在大屏显示器和移动设备上都有良好的视觉体验。 项目压缩包“guandao”可能包含了实现以上功能的源代码、资源文件（如图片、CSS样式表和...
ECharts商业产品图表库 4.2.1
09-30
ECharts商业产品图表库是基于JavaScript的数据可视化工具，版本4.2.1是其一个重要的迭代，为开发者提供了丰富的图表类型和强大的交互功能。这个库特别适用于制作商业报告、数据分析和展示，因为它的设计目标是易用性...
echarts实现地图以及半圆图表
04-15
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上绘制地图和自定义图形。在这个主题中，我们将深入探讨如何使用ECharts实现...
Android开发中使用achartengine绘制各种图表的方法
08-29
下面将详细介绍如何使用`achartengine`在Android开发中绘制各种图表。 首先，让我们看一个简单的条形图（Bar Chart）的示例。在提供的代码片段中，有一个名为`ABarChart`的类，它包含了一个`execute`方法，该方法...
在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
鹤渺的星球
12-22 1943
最粗暴的解决办法是给div一个固定的高度，也就是上面三种解决方案的核心，比如你遇到问题时候实时给div一个高宽恒定值，然后看看画出的图尺寸变没有，再去考虑是样式冲突或者组件渲染的问题导致这种情况。
【图表】echart指南
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-23 1万+
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 可以流畅的运行在 PC 和移动
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 5803
解决echarts图表设置宽度100%结果为100px问题
echarts宽高随父容器自适应，以及设置dom高为100%变为100px的解决
missxgao的博客
11-03 4683
echarts的文档里面说宽高必须设置固定值，不然图形无法渲染出来。 有一种方式可以解决这个问题，通过设置百分比来渲染图形，就是在dom上级包一层父容器，父级和子级都设置宽高为百分比，子dom宽高都设置100%，渲染图形的时候，根据父dom的宽高，dom.offsetWidth计算出实际宽高，然后将图形dom的宽设置成此值，再调用MyChart的resize()方法，重新渲染一遍图形 <div id ="treegraph" class="eui-col-xl-9" style="positi
Echarts图表自适应宽高大小
剑雪封喉
06-06 7713
近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法. 官网描述的截图如下： 这个鬼东西，简直是反人类的设定好吗。这都什么年代了不能自适应的网站是不可以滴。我在这个项目使用的是百分比布局。 先说下整体的思路，就是在Echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高在赋值给Echarts容器。 ...
解决echarts图宽度自适应问题，设置100%宽度显示100px
热门推荐
李瑞清的博客
06-05 1万+
问题 我的echarts在卡片里面，为了自适应，我设置.stat图表div的宽度为100%，但是默认设置为了100px。 <nz-card [ngStyle]="{display:statShow}" class="statInfo" [nzExtra]="statTemplate"> <div #statInfo class="stat"></div> </nz-card> 原因 图表的父容器statInfo是隐藏的，我默认设置 displ
echarts宽度100%变成了100px (实用）
chelen_jak的专栏
11-05 3902
原文出处：https://www.cnblogs.com/SoundOfTheSea/p/7699683.html 延伸阅读：echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起 这几天在做折线图，先是用的chart.js，但是chart.js会出现纵轴不显示数字，宽度不能设置百分比只能设置定值，而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像，找了半天也没有...
ECharts绘制图表涉及缩放属性
07-12
在ECharts中，可以使用以下缩放属性来控制图表的缩放效果： 1. `dataZoom`：数据区域缩放组件，用于在图表中选择区域进行缩放。它可以水平或垂直放置，并支持滑动条、滚轮、手势等交互方式进行缩放。通过设置`start`和`end`属性，可以控制缩放的起始和结束位置。 ```javascript option = { // ... dataZoom: [ { type: 'inside', // 内置型数据区域缩放组件 xAxisIndex: 0, // 指定横轴索引 start: 30, // 缩放起始位置的百分比 end: 70 // 缩放结束位置的百分比 }, { type: 'slider', // 滑动条型数据区域缩放组件 xAxisIndex: 0, // 指定横轴索引 start: 30, // 缩放起始位置的百分比 end: 70 // 缩放结束位置的百分比 } ], // ... }; ``` 2. `visualMap`：视觉映射组件，用于将数据映射到图表的视觉属性上，并支持缩放功能。它可以通过滑动条、手势等交互方式进行缩放，从而改变视觉映射的范围。 ```javascript option = { // ... visualMap: { type: 'continuous', // 连续型视觉映射组件 min: 0, // 视觉映射的最小值 max: 100, // 视觉映射的最大值 inRange: { color: ['#d94e5d', '#eac736', '#50a3ba'] // 视觉映射的颜色范围 }, // ... }, // ... }; ``` 3. `grid`：网格组件，用于控制图表的位置和大小。通过设置`left`、`right`、`top`、`bottom`属性，可以调整图表在容器中的位置和大小，从而实现缩放的效果。 ```javascript option = { // ... grid: { left: '10%', right: '10%', top: '10%', bottom: '10%' }, // ... }; ``` 这些属性可以根据具体需求进行配置，用于实现图表的缩放效果。请注意，以上示例代码仅为演示用途，实际使用时需要根据具体的图表类型和需求进行相应的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值