vue 中echart折线自适应
前端时间做一个vue的项目,echart是按需引入的如下:
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'
然后发现在缩放浏览器窗口时折线图并不会自适应,费了好一会才解决,记录下来给需要的小伙伴,
解决方法是在mounted里面调用如下方法:
init () {
//折线图宽高自适应
const self = this;
setTimeout(() => {
window.onresize = function () {
if(self.$refs.lineChart) {
self.chart = echarts.init(self.$refs.lineChart);
self.chart.resize();
}
};
}, 20);
}
vue 中echart折线自适应的更多相关文章
- vue 中使用 echarts 自适应问题
echarts 自带的自适应方法 resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) ...
- Vue中div高度自适应
Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...
- vue 中 echart 在子组件中只显示一次的问题
问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是 ...
- vue中移动端自适应的postcss-plugin-px2rem插件
flexible 主要是用来响应式改变根元素的字体大小 安装命令 npm install lib-flexible --save 在main.js里面导入命令import 'lib-flexible' ...
- vue中移动端自适应方案
安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加m ...
- (Vue中)cehart在同一个dom上画图图切换时饼图有折线图的坐标系
网上都是别人转载的,下面是转载的代码,在Vue中根本不适用 var echartrunningstate = null; if (echartrunningstate && echar ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- vue中使用chart.js
1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
随机推荐
- day34 并行并发、进程开启、僵尸及孤儿进程
day34 并行并发.进程开启.僵尸及孤儿进程 1.并行与并发 什么是并行? 并行指的是多个进程同时被执行,是真正意义上的同时 什么是并发? 并发指的是多个程序看上去被同时执行,这是因为cpu在多个程 ...
- JAVA实验报告及第九周总结
Java第九周作业 实验报告七 实验任务详情: 完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负 ...
- 学习笔记:CentOS7学习之十三(1):硬盘介绍
1. SAS-SATA-SSD-SCSI-IDE硬盘讲解 1.1 常见硬盘类型: SAS硬盘:SAS(Serial Attached SCSI),串行连接SCSI接口,串行连接小型计算机系统接口.SA ...
- 人渣给我笔记本网络适配器里加的的“bluetooth设备(个人局域网)”,卸载不掉
- PAT A1019 General Palindromic Number (20 分)
AC代码 #include <cstdio> const int max_n = 1000; long long ans[max_n]; int num = 0; void change( ...
- Swoft2.x 小白学习笔记 (三) --- Task、协程
介绍swoft中 1.Task 2.协程 一:Task任务: 1.配置,在 app/bean.php文件中加入 'httpServer' => [ // ... 'on' => [ Swo ...
- Python开发之IDE选择
Python开发之IDE 一.为什么用IDE 到现在为止,谁还不是个写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地点,执行时还要切换到命令行调用python解释器,好麻 ...
- CSS和DOM入门
CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 ...
- python-open函数
open函数,该函数用于文件处理 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 一.打开文件 1 文件句柄 = open('文件路径', '模式') 打开文件时,需要指定文件路径和以何等方式 ...
- java8 List对象集合去重
//测试数据 WaterMeter w0 = new WaterMeter(); WaterMeter w1 = new WaterMeter(); WaterMeter w2 = new Water ...