首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

关于echarts图表在tab页中width:100%失效的问题

更新日期: 2018-07-06阅读: 4.3k标签: echarts

在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽

<div id="chartMain" style="width:100%;height:300px"></div>

原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px


解决办法：

找一个在tab页的切换操作中不会隐藏的父容器，把它的宽度的具体值取出后在初始化图表之前直接赋给图表

$("#chartMain").css('width',$("#TabContent").width());//获取父容器的宽度具体数值直接赋值给图表以达到宽度100%的效果
var Chart = echarts.init(document.getElementById('chartMain'));

// 指定图表的配置项和数据
option = { ...配置项和数据 };

// 使用刚指定的配置项和数据显示图表。
Chart.setOption(option);

来源：http://www.php.cn/js-tutorial-406009.html


链接: https://fly63.com/article/detial/912

上一页:  微信小程序Socket的实现_基于socket-io下一页:  jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

关于ECharts内存泄漏问题

最近使用websocket加ECharts做了一个实时监控的功能，发现了一个比较严重的问题，就是浏览器运行一段时间就会非常卡，之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时

微信小程序不支持Echarts中tooltip的解决方法

Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道，Tooltip这个功能有多么重要，尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?

三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

对比以上3种图表，ECharts和BizCharts相对容易使用，尤其ECharts的配置非常清晰，BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰，按需引用。G2比较适合需要大量图表交互时引用，其丰富的api处理交互逻辑相对更有优势。

echarts是什么_echart.js学习和使用

什么是Echarts？简单来说呢它就是一个商业级数据图表，一个纯JavaScript的图标库。可以兼容绝大部分的浏览器，可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

如何在 Vue 项目中使用 echarts

数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts 图表库,废话不多说，那我们就看看如何在 Vue 的项目中使用 echarts。

基于echarts 灵活封装react柱形图组件

现在各种框架各种库都很强大，但是也因为功能强大，导致很多配置都过于繁重，真正有用的就那么几个，今天就基于echarts封装一个通用柱形图!想要了解其他的组件可以看下我之前封装的其他组件有好的思路或者其他的也会分享出来的

echarts的使用注意要点

在公司做了一版dashboard，对echarts有了大量的实践。坚果图，日历图，折线图，地理图。难易程度排名为坚果图，折线图，日历图，地理图。总结了以下几点注意事项：

vue中使用ECharts实现折线图和饼图

在开发后台管理项目时，需要统计后台用户数据，以折现图和饼图的形式显示，这边采用apache-echarts来实现需求。

在vue项目中封装echarts的正确姿势

可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题

解决echarts设置100%但只有100px的问题

具体问题是，设置echarts宽度width为100%，结果出来的时候就变成了100px；这种情况一般都是 echarts所在的div一开始是display:none，在一开始初始化执行js的时候找不到这个元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!