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

解决方式:

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

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

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

  1. //html
  2. <div id="LineCharts" style="width:100%;height:400px"></div>
  3.  
  4. //js
  5. let pieCharts = document.getElementById("LineCharts");
  6. let chartsOffetWidth = document.getElementById("LineCharts").offsetWidth;
  7. if(chartsOffetWidth === 0 ){
  8. let parentWidth = document.documentElement.clientWidth - 285;
  9. if(parentWidth < 1035){
  10. parentWidth = 1035;
  11. }
  12. pieCharts.style.width = parentWidth + 'px';
  13. }
  14. this.myLineCharts = echarts.init(pieCharts);
  15. 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. SAM4E单片机之旅——13、LCD之ASF初步

    在Atmel Studio 6中,集成了Atmel Software Framework(ASF框架).通过它提供的库,可以很快速地完成新的项目. 这次的最终目标使用ASF在LCD上显示出文字“Hel ...

  2. python循环导入的解决方案

    解决循环import的方法主要有几种:   1.延迟导入(lazy import)   即把import语句写在方法或函数里面,将它的作用域限制在局部. 这种方法的缺点就是会有性能问题.     2. ...

  3. 【spring配置】——spring整合Quartz定时器

    第一种:为普通java类中的某个方法配置跑批任务 MethodInvokingJobDetailFactoryBean CronTriggerBean SchedulerFactoryBean 1.定 ...

  4. 九度OJ 1055:数组逆置 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7324 解决:3429 题目描述: 输入一个字符串,长度小于等于200,然后将数组逆置输出. 输入: 测试数据有多组,每组输入一个字符串. ...

  5. drawable canvas使用

    /** * Drawable 就是一个可画的对象, * 其可能是一张位图(BitmapDrawable), * 也可能是一个图形(ShapeDrawable), * 还有可能是一个图层(LayerDr ...

  6. 7-10 括号匹配(25 分) 【STL】

    7-10 括号匹配(25 分) 给定一串字符,不超过100个字符,可能包括括号.数字.字母.标点符号.空格,编程检查这一串字符中的( ) ,[ ],{ }是否匹配. 输入格式: 输入在一行中给出一行字 ...

  7. ES6中promise总结

    一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...

  8. java入门的语法学习

    用java语言写了一个求两个数最大公约数的程序: import java.io.*; import java.util.*; import java.math.*; public class Main ...

  9. LightOJ - 1395 A Dangerous Maze (II) —— 期望

    题目链接:https://vjudge.net/problem/LightOJ-1395 1395 - A Dangerous Maze (II)    PDF (English) Statistic ...

  10. 【html学习整理】常用标签

    什么是html 超文本标记语言 html语法规则       所有的命令放到<> 大部分成对存在,以<tag>开始,</tag>结束 网页的基本框架,常用的标记 & ...