当tab标签栏变动时,echarts图会发生挤,这种情况,发现是html容器的width=100%这个设置,变成了width=100px。

解决方式:

1.设置一个最小宽度,获取width的值,当这个值小于最小宽度时,赋值给它。

2.使用window.innerWidth获取值,在tab未激活时也可以获取得到页宽。

document.getElementById("LineCharts").style.width=(window.innerWidth-60)+'px';

//html
<div id="LineCharts" style="width:100%;height:400px"></div> //js
let pieCharts = document.getElementById("LineCharts");
let chartsOffetWidth = document.getElementById("LineCharts").offsetWidth;
if(chartsOffetWidth === 0 ){
let parentWidth = document.documentElement.clientWidth - 285;
if(parentWidth < 1035){
parentWidth = 1035;
}
pieCharts.style.width = parentWidth + 'px';
}
this.myLineCharts = echarts.init(pieCharts);
this.myLineCharts.clear();

  

vue 之 折线图挤压的更多相关文章

  1. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  2. vue下使用echarts折线图及其横坐标拖拽功能

    vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...

  3. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  4. [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

    因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...

  5. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  6. 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)

    要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...

  7. 使用Echarts实现折线图的一点总结

    使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...

  8. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

  9. C# 实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

随机推荐

  1. Spring IOC源代码具体解释之容器依赖注入

    Spring IOC源代码具体解释之容器依赖注入 上一篇博客中介绍了IOC容器的初始化.通过源代码分析大致了解了IOC容器初始化的一些知识.先简单回想下上篇的内容 加载bean定义文件的过程.这个过程 ...

  2. 微信小程序TabBar的使用

    一.TabBar使用步骤 1.创建所需要的界面和所需要的图片: 2.配置文件: 我们找到项目根目录中的配置文件 app.json 加入如下配置信息 "tabBar": { &quo ...

  3. 【BZOJ1115】[POI2009]石子游戏Kam 阶梯博弈

    [BZOJ1115][POI2009]石子游戏Kam Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要 ...

  4. EasyNVR流媒体服务器网页兼容调试:ie浏览器下的接口调用成功但页面无法显示实时的数据

    许多问题很难在开发的过程中就想的面面俱到,都是在实际应用.调试的过程中一一的优化的.由于easynvr的受众越来越多,因此也出现了好多在开发之初并没有留意的一些细节.我这次发现的问题就是给客户远程解决 ...

  5. LigerUI java SSH小例子

    1.新建web project 2.ssh框架 加入到项目中去(这里不介绍,网上搜索) 3.struts2配置 http://www.cnblogs.com/istianyu/archive/2013 ...

  6. php函数: set_error_handler

    <?php // $errno, $errstr, $errfile, $errline , 系统自动生成这四个变量的值(如果存在!) function error_catcher($errno ...

  7. 远程服务器上的weblogic项目管理(五) PermGen内存溢出问题

    weblogic偶尔会出现PermGen异常,内存溢出的问题,这个时候需要修改weblogic安装目录下的domain/common/bin/commEnv.cmd. 打开后在其中找到: set ME ...

  8. c# wpf ComboBox 动态下拉框 及 动态默认值设定

    1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...

  9. ZOJ - 3430 Detect the Virus —— AC自动机、解码

    题目链接:https://vjudge.net/problem/ZOJ-3430 Detect the Virus Time Limit: 2 Seconds      Memory Limit: 6 ...

  10. ASP.NET MVC3中的路由系统

    MVC中,用户访问的地址并不映射到服务器中对应的文件,而是映射到对应Control里对应的ActionMethod,由ActionMethod来决定返回用户什么样的信息.而把用户访问的地址对应到对应的 ...