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 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
随机推荐
- SAM4E单片机之旅——13、LCD之ASF初步
在Atmel Studio 6中,集成了Atmel Software Framework(ASF框架).通过它提供的库,可以很快速地完成新的项目. 这次的最终目标使用ASF在LCD上显示出文字“Hel ...
- python循环导入的解决方案
解决循环import的方法主要有几种: 1.延迟导入(lazy import) 即把import语句写在方法或函数里面,将它的作用域限制在局部. 这种方法的缺点就是会有性能问题. 2. ...
- 【spring配置】——spring整合Quartz定时器
第一种:为普通java类中的某个方法配置跑批任务 MethodInvokingJobDetailFactoryBean CronTriggerBean SchedulerFactoryBean 1.定 ...
- 九度OJ 1055:数组逆置 (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7324 解决:3429 题目描述: 输入一个字符串,长度小于等于200,然后将数组逆置输出. 输入: 测试数据有多组,每组输入一个字符串. ...
- drawable canvas使用
/** * Drawable 就是一个可画的对象, * 其可能是一张位图(BitmapDrawable), * 也可能是一个图形(ShapeDrawable), * 还有可能是一个图层(LayerDr ...
- 7-10 括号匹配(25 分) 【STL】
7-10 括号匹配(25 分) 给定一串字符,不超过100个字符,可能包括括号.数字.字母.标点符号.空格,编程检查这一串字符中的( ) ,[ ],{ }是否匹配. 输入格式: 输入在一行中给出一行字 ...
- ES6中promise总结
一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...
- java入门的语法学习
用java语言写了一个求两个数最大公约数的程序: import java.io.*; import java.util.*; import java.math.*; public class Main ...
- LightOJ - 1395 A Dangerous Maze (II) —— 期望
题目链接:https://vjudge.net/problem/LightOJ-1395 1395 - A Dangerous Maze (II) PDF (English) Statistic ...
- 【html学习整理】常用标签
什么是html 超文本标记语言 html语法规则 所有的命令放到<> 大部分成对存在,以<tag>开始,</tag>结束 网页的基本框架,常用的标记 & ...