当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. phpstudy nginx下curl请求本地其他项目

    curl 请求的时候 如果用post请求,传递参数为 数组的时候 header 头 会被设置为  multipart/form-data  如果是字符串 形式 header 头会被设置为applica ...

  2. struts2 Eclipse 中集成strust2开发框架实例

    下面通过建立一个小的实例具体来说明Eclipse 集成struts2,以下实例采用的为 struts2 版本为 struts2 2.2.3.1 为应用. 1. 下载struts2的开发包 第一步: 在 ...

  3. springcloud微服务实战--笔记--1、基础知识

    微服务的问题: 分布式事务和数据一致性. 由于分布式事务本身第实现难度就非常大,所以在微服务架构中,我们更强调在各服务之间进行无事务第调用,而对于数据一致性,只要求数据在最后第处理状态是一致第即可:若 ...

  4. me12里更改信息记录的净价和有效价格,以及信息记录的条件价格

    转自 http://blog.csdn.net/zeewjj/article/details/7941525REPORT ztest. DATA:l_kbetr LIKE konp-kbetr.l_k ...

  5. [容易] A + B 问题

    题目来源:http://www.lintcode.com/zh-cn/problem/a-b-problem/

  6. VMware和Centos系统安装

    1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) 选择性 pc可以选择 -纯系统 Linux/wi ...

  7. C++函数模板的显示调用与隐式调用

    C++函数模板可以显示调用与可以隐式调用 首先定义函数模板: template <class T> inline const T& c_max (const T& a, c ...

  8. hadoop 安装配置

    1.伪分布式搭建: 步骤参考: http://wenku.baidu.com/link?url=N_Sc7dqaO5HB47SmhntYZQI2tvvAjYt0mWT0fx28FDSMRYKTLUTc ...

  9. 通道(Channel)的原理获取

    通道表示打开到 IO 设备(例如:文件.套接字)的连接.若需要使用 NIO 系统,需要获取用于连接 IO 设备的通道以及用于容纳数据的缓冲区.然后操作缓冲区,对数据进行处理.Channel 负责传输, ...

  10. DubboAdmin平台

    DubboAdmin部署 将dubbo-admin.war放入到TomcatWebapps目录下,修改dubbo.properties中的Zookeeper连接地址即可. dubbo-admin放到 ...