vue 之 折线图挤压
当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 之 折线图挤压的更多相关文章
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- vue下使用echarts折线图及其横坐标拖拽功能
vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...
- vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)
一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...
- [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示
因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)
要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...
- 使用Echarts实现折线图的一点总结
使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...
- ECharts绘制折线图
首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...
- C# 实时折线图,波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
随机推荐
- 【BZOJ4237】稻草人 cdq分治+单调栈+二分
[BZOJ4237]稻草人 Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田 ...
- 在调用Response.End()时,会执行Thread.CurrentThread.Abort()操作
在调用Response.End()时,会执行Thread.CurrentThread.Abort()操作. 如果将Response.End()放在try...catch中,catch会捕捉Thread ...
- 九度OJ 1004:Median
#include <stdio.h> #include <stdlib.h> #include <limits.h> #define N 1000000 int a ...
- STO到底是什么?
最近,链圈谈论最多的就是STO了,那STO到底是什么?现阶段发展得怎么样? 什么是STO STO英文全称Security Token Offering,即证券化通证发行,指在安全法律体系下受到约束的基 ...
- 采集练习(十一) php 获得电视节目预告---数据来自电视猫
昨天写了个采集搜视网的电视节目预告,刚好今天有心情,想采下其他网站提供的节目预告,发现 电视猫wap版 的提供的节目预告也蛮好采(需要正则)....感谢移动互联网! 电视猫的 wap版地址是 htt ...
- linux下 python源码包解压报错
执行下面的命令 tar -zvxf Python.3.6.5.tgz 报错 gzip: stdin: not in gzip format tar: Child returned status 1 t ...
- graphics基础
- 【ES6】更易于继承的类语法
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- 在Linux下创建7种类型的文件
在测试的时候有时会需要每种类型的文件,在系统中进行搜索都会找到,当然最方便的还是手动创建它们进行测试使用. 普通文件: $ touch regular 目录: $ mkdir directory 符号 ...
- legend2---开发日志15(功能需求明确,设计好类和结构的好处是)
legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...