当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. 【BZOJ4237】稻草人 cdq分治+单调栈+二分

    [BZOJ4237]稻草人 Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田 ...

  2. 在调用Response.End()时,会执行Thread.CurrentThread.Abort()操作

    在调用Response.End()时,会执行Thread.CurrentThread.Abort()操作. 如果将Response.End()放在try...catch中,catch会捕捉Thread ...

  3. 九度OJ 1004:Median

    #include <stdio.h> #include <stdlib.h> #include <limits.h> #define N 1000000 int a ...

  4. STO到底是什么?

    最近,链圈谈论最多的就是STO了,那STO到底是什么?现阶段发展得怎么样? 什么是STO STO英文全称Security Token Offering,即证券化通证发行,指在安全法律体系下受到约束的基 ...

  5. 采集练习(十一) php 获得电视节目预告---数据来自电视猫

    昨天写了个采集搜视网的电视节目预告,刚好今天有心情,想采下其他网站提供的节目预告,发现  电视猫wap版 的提供的节目预告也蛮好采(需要正则)....感谢移动互联网! 电视猫的 wap版地址是 htt ...

  6. linux下 python源码包解压报错

    执行下面的命令 tar -zvxf Python.3.6.5.tgz 报错 gzip: stdin: not in gzip format tar: Child returned status 1 t ...

  7. graphics基础

  8. 【ES6】更易于继承的类语法

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  9. 在Linux下创建7种类型的文件

    在测试的时候有时会需要每种类型的文件,在系统中进行搜索都会找到,当然最方便的还是手动创建它们进行测试使用. 普通文件: $ touch regular 目录: $ mkdir directory 符号 ...

  10. legend2---开发日志15(功能需求明确,设计好类和结构的好处是)

    legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...