echarts图表自适应,容器宽度设置为百分数,但是图表显示不全,缩到一起
2018-03-22 14:52
1246 查看
问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。
添加window自适应方法不管用,如下: mychart.setOption(option);
$(window).resize(function() { //重置容器高宽 mychart.resize(); });各种搜索这个问题,找到了方法。
先借鉴大牛解释出现这个问题的原因:
查了一下echarts源码,发现了这个
$("#map").css('width',$("#chart").width()); //给图设置固定宽度,div chart是第一个tab页面上面的某个图,宽度布局与map一致
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
var myChart = ec.init(document.getElementById('map'));
PS:根据实际需要选取其他div宽度进行设置。 还可同时设置宽度、高度
var width = $("参考图ID").width();
var height = $("参考图ID").height();
$("#目标图ID").css("width", width).css("height", height);
添加window自适应方法不管用,如下: mychart.setOption(option);
$(window).resize(function() { //重置容器高宽 mychart.resize(); });各种搜索这个问题,找到了方法。
先借鉴大牛解释出现这个问题的原因:
查了一下echarts源码,发现了这个
Painter.prototype._getWidth = function() { var root = this.root; var stl = root.currentStyle || document.defaultView.getComputedStyle(root); return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0; };echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px。我实际按F12看的时候也看到上面图的宽度是100px。基于以上原因,参考大牛的解决方法,是要给这个图固定宽度。下面贴部分代码:$(document).ready(function(){
$("#map").css('width',$("#chart").width()); //给图设置固定宽度,div chart是第一个tab页面上面的某个图,宽度布局与map一致
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
var myChart = ec.init(document.getElementById('map'));
PS:根据实际需要选取其他div宽度进行设置。 还可同时设置宽度、高度
var width = $("参考图ID").width();
var height = $("参考图ID").height();
$("#目标图ID").css("width", width).css("height", height);
相关文章推荐
- echarts学习总结(一):图表溢出窗口,图表数据窗口显示不全
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
- echarts 图表根据容器大小自适应
- div设置了居中和宽度,但是显示时宽度占100%
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- asp.net 调用echarts显示图表控件随浏览器自适应解决方案
- echarts图表随屏幕的宽度自适应
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- echarts图表中的点、柱形或者折线显示不出来,但是有数据的问题解决(另附后台返回数据实例代码)
- Echarts 如何设置多个图表自适应窗口大小
- echarts在tab切换时容器宽度设置为100%,只展示100px
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
- Echarts学习记录——设置图表与容器的间隔
- echarts报表legend和图表重合问题(设置绘图区域(grid)和容器大小)
- Echarts学习记录——设置图表与容器的间隔
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- Echarts一个页面多图图表宽度自适应解决方案
- echarts学习总结(三):图表溢出窗口,图表数据窗口显示不全
- vue中动态加入ECharts图表时,ECharts宽度自适应/不能100%撑开