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

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

#数据可视化

本文探讨了ECharts在容器元素设置display:none属性时，图表无法正确获取宽高值的问题。通过动态调整宽高或设定固定尺寸的方法，解决了图表显示不全的困扰。

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

解决方法：

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

mychart.resize({

      width: $(window).witdth(),

      height: $(window).width(),

})

2. 给容器宽高设置定值

echarts 车间图表
11-02
ECharts 是一个基于 JavaScript 的数据可视化库，广泛应用于各种类型的图表绘制，如您所提到的“车间图表”。它由百度开发并开源，提供丰富的图表类型，包括但不限于圆形图、柱状图、百分比图和折线图。这些图表在...
基于Echarts图表在div动态切换时不显示的解决方式
10-15
为了解决这个问题，确保Echarts的容器具有固定像素宽度而非百分比宽度，例如设为`600px`，这可以帮助Echarts在页面加载时准确计算图表尺寸。 总之，处理Echarts图表在div动态切换时不显示的问题，关键在于确保图表...
echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起
热门推荐
张大晴的博客
08-02 1万+
文章转载：https://blog.youkuaiyun.com/liuminyi1987/article/details/79653737   问题如下：在tab切换的时候发现第二个tab页面的图表显示不全，缩到了一起。 添加window自适应方法不管用，如下：   mychart.setOption(option); $(window).resize(function() ...
echarts容器宽高百分比
打工人
02-22 1372
今天写项目时echart的父元素宽高用的百分比,父元素的父元素宽高是用的height:calc(),刚开始是正常的,页面一刷新,echarts整个图都缩在一起了,用echarts.resize()没有用 原代码: echarts.setOption(option) window.addEventListener('resize', echarts.resize()) echarts.resize() 后来调试发现页面大小变化之后就能正常,只有通过触发window的resize事件才会正常 代码: echa
Echarts容器宽高为百分比，图表展示不全
RequesToGod的博客
05-13 3796
Echarts设置宽高，图表仍展示不全问题 问题示例如下： 代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。 出现该问题的原因： 1、高度固定，宽度百分比 2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。 解决方案： 1、重新调用图表绘制函数。 2、调用Echats实例的resize()方法。 ...
echarts图表自适应，容器宽度设置为百分比，但是图表显示不全
yijiupingfan0914的博客
05-30 6132
原文：https://blog.youkuaiyun.com/liuminyi1987/article/details/79653737 问题如下：在tab切换的时候发现第二个tab页面的图表显示不全，缩到了一起。 添加window自适应方法不管用，如下： mychart.setOption(option); $(window).resize(function() { //重置容器高宽 my...
echarts宽度如何设为百分比
彤云望月
06-29 3885
前言 问题 : 有八个饼状图要展示，其中一行展示两个饼状图。一开始是固定了宽度为450px，但到了宽屏上一行就会展示三个。 思路：于是想当然的想到将 width 设为 百分比，继承父组件的宽度。但是改完之后图缩到了一起，网上查了查，发现echarts源码中，计算宽度的时候将 100% parseInt -> 100px, 所以比如我改成了45%, 就会显示为 45px。 解决：最后查了各种博客，得到了解决方法，就是根据别的组件宽度来动态改变echarts图标的宽度。 代码 var width =
web端使用echarts绘制图表示例（柱状图），包括自定义工具
cyj0919的博客
07-08 396
【代码】web端使用echarts绘制图表示例（柱状图），包括自定义工具。
栏目一：使用echarts绘制简单图形
最新发布
m0_70405779的博客
09-28 1702
Echarts是一款基于JavaScript的可视化图表库。它提供了丰富的图表类型和交互功能，可以用于在网页中展示各种数据。Echarts支持多种数据格式的转换和操作，可以轻松地将数据转换为图表所需的格式，并且可以对图表进行个性化的配置和设置。Echarts还支持响应式布局，可以根据不同的设备和屏幕大小自动调整图表的显示效果。Echarts的文档齐全，使用简便，并且具有强大的扩展性，可以满足各种复杂的数据可视化需求。本章节将从在线编辑图表和本地绘制图表两个方面进行介绍。
可控制管道内动态水流及左侧融合echarts图表（并自适应屏幕）
10-13
在这个项目中，动态水流和ECharts图表都需要根据屏幕尺寸进行适配，确保在大屏显示器和移动设备上都有良好的视觉体验。 项目压缩包“guandao”可能包含了实现以上功能的源代码、资源文件（如图片、CSS样式表和...
echarts柱状图铺满_echarts图表自适应，容器宽度设置为百分比，但是图表显示不全，缩到一起...
weixin_39942037的博客
12-21 2787
chartContainer用来存放Echart图，设置宽高100%时出现Echart图没有铺满div需要强行设置宽高pxecharts的源码中计算宽度时：Painter.prototype._getWidth = function() {var root = this.root;var stl = root.currentStyle || document.defaultView.getComp...
echarts设置容器宽度设置为100%只显示100px宽度
呱呱的博客
12-13 6662
问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 <div class="environmentChart" > <div class="chart-wrap" id="environmentChart"></div> </div> 解决一：通过...
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
Machel_的博客
07-16 3416
当我们点击全局统计(tab)的时候，由于Echart图标只会初始化一次，当第一次加载游戏设置（tab）的时候已经被初始化了，所以这个时候，虽然全局统计的display:none效果消失，图表容器width：100%起作用的时候，echart图表宽高仍然为100px。有的时候我们为了让Echarts自适应容器宽度，把Echarts容器宽度设置为100%，使容器宽度变化的时候，图表宽度也跟着变化。但是我们发现容器宽度变化的时候，图表宽度并不会跟着变化。但是点击全局统计加载图表，发现图表的宽度不符合预期。
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 1223
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
懒虫的博客
05-09 1499
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1912
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts图表宽度为百分比出现的问题
withNanSi的博客
07-23 1497
问题：echarts因为移动端适应性宽度为百分比，图表显示不正常 原因：echarts图表外层div宽高要给固定的值 解决： 给外层div固定的值 设置监听，获取到外层div最新宽，赋值给echarts图表 var phone = echarts.init(document.getElementById("phone")); $(window).resize(function () { phone.resize({ width:
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、付费专栏及课程。

余额充值