echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起
<div id="chartContainer" style="height:100%;width:100%;"></div>
chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div

需要强行设置宽高px
<div id="chartContainer" style="height:450px;width:1030px;"></div>
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
echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起的更多相关文章
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- div设置滚动条内容任然显示不全
<div style="overflow:scroll;height:100%"></div> 注意:高度需设置为100%,不然内容显示不全
- echarts在tab切换时容器宽度设置为100%,只展示100px
在 mychart.setOption(option); 后面加上 mychart.resize(); 即可
- js获取宽度设置thickbox百分比
thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...
- 问题2:input、textarea、submit 宽度设置为100%,但显示宽度不一致
<style type="text/css"> body{ padding: 10px; } input,textarea{ width: 100%; } </s ...
- echarts 视图自适应问题
最近在项目中用到了echarts,在处理视图自适应问题上记录一下:同时比较一下和highcharts的区别: 在echarts中有一个resize的函数,可以直接在监听窗口变化时重新渲染即可: //在 ...
- vue中 eCharts 自适应容器
在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...
- eCharts 多个图表自适应窗口大小
单个图表自适应页面窗口只需要在创建图表节点后面添加一句代码就可以了: window.onresize = myChart.resize; 多图表要自适应页面,创建图表节点后面添加事件,并在事件函数里面 ...
- div宽度设置无效问题解决
问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...
随机推荐
- Vue 一些零零散散~
1. F5刷新不会触发vue的destroyed事件. 2. computed 的 vuex 数据 ------> beforeCreated: undefined / creat ...
- echarts 报表使用
下载echats后,将下包中的js引入项目,\echarts-2.2.7\echarts-2.2.7\build\dist //在页面中建立宽高的区域,用来显示报表 <div style=&qu ...
- leetcode-162周赛-1255-得分最高的单词集合
题目描述: 方法:穷举暴力 class Solution: def maxScoreWords(self, words: List[str], letters: List[str], score: L ...
- git - Mac生成SSH key
步骤1.检查是否已经存在SSH Key 打开电脑终端,输入以下命令: ls -al ~/.ssh 会出现两种情况 步骤2. 生成/设置SSH Key 继续上一步可能出现的情况 (1)情况一: 终端出现 ...
- 【JZOJ3674】【luoguP4042】【BZOJ3875】骑士游戏
description 在这个游戏中,JYY一共有两种攻击方式,一种是普通攻击,一种是法术攻击.两种攻击方式都会消耗JYY一些体力.采用普通攻击进攻怪兽并不能把怪兽彻底杀死,怪兽的尸体可以变出其他一些 ...
- Java——面向对象知识总结
面向对象的三条主线: 一.类及类的成分 1.类与类的关系: java程序是关注于类的设计. 类从代码的角度:并列关系! 从执行.设计的角度:关联关系.继承关系.聚合关系 class A{ } clas ...
- vscode开发vue项目保存时自动执行lint进行修复
vscode下载eslint插件 vscode进行设置 找到settings.json 在里面写入如下内容进行保存 { "eslint.autoFixOnSave": tr ...
- NX二次开发-Block UI C++界面(表达式)控件的获取(持续补充)
Expression(表达式)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); // ...
- Android Studio androidx 包冲突解决方法
如果包冲突了会包如下这样的错: Android dependency 'androidx.core:core' has different version for the compile (1.0.0 ...
- Hadoop-HDFS的伪分布式和完全分布式集群搭建
Hadoop-HDFSHDFS伪分布式集群搭建步骤一.配置免密登录 ssh-keygen -t rsa1一句话回车到底 ssh-copy-id -i ~/.ssh/id_rsa.pub root@no ...