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 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
随机推荐
- python 基础 4.4 生成式 生成器 迭代器
一.生成式和生成器 列表生成式是python受欢迎的语法之一,通过一句简洁的语法就可以对一组元素进行过滤,还可以对得到的元素进行转换处理. #/usr/bin/python #coding=u ...
- Vue中div高度自适应
Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...
- C# 自定义控件制作和使用实例(winform)(转)
本例是制作一个简单的自定义控件,然后用一个简单的测试程序,对于初学者来说,本例子比较简单,只能起到抛石引玉的效果. 我也是在学习当中,今后会将自己所学的逐步写出来和大家交流共享. 第一步:新建一个 ...
- 怎么使用Aspose.Cells读取excel 转化为Datatable
说明:vs2012 asp.net mvc4 c# 使用Aspose.Cells 读取Excel 转化为Datatable 1.HTML前端代码 <%@ Page Language=" ...
- python中的特殊用法
1 别名 from xxx import xxx as xxx;
- Cauchy sequence Hilbert space 希尔波特空间的柯西序列
http://mathworld.wolfram.com/HilbertSpace.html A Hilbert space is a vector space with an inner prod ...
- mooc课程mit 6.00.1x--problem set3解决方法
RADIATION EXPOSURE 挺简单的一道题,计算函数和算法过程都已经给出,做一个迭代计算就行了. def radiationExposure(start, stop, step): ''' ...
- 单机部署tomcat的shell脚本
单机部署tomcat的shell脚本,来自网络,自己需要时要根据自己的需求改动. #!/bin/sh # ############################################### ...
- PAT 天梯赛 L2-022. 重排链表 【数据结构】
题目链接 https://www.patest.cn/contests/gplt/L2-022 思路 先用结构体 把每个结点信息保存下来 然后深搜一下 遍历一下整个链表 然后就重新排一下 但是要注意一 ...
- java.util.ResourceBundle国际化用法详解
java.util.ResourceBundle国际化用法详解 初识国际化和ResourceBundle 这个类主要用来解决国际化和本地化问题.国际化和本地化可不是两个概念,两者都是一起出现的.可以说 ...