vue中echarts随窗体变化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div>
<script>
export default {
mounted(){
this.drawLine();
},
methods: {
drawLine(){
var myChartContainer = document.getElementById('myChart');
//用于使chart自适应宽度,通过窗体宽计算容器高宽
var resizeMyChartContainer = function(){
myChartContainer.style.width=(document.body.clientWidth-75)+'px'
}
//设置容器高宽
resizeMyChartContainer()
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(myChartContainer) // 绘制图表
myChart.setOption({
title: { text: '启动次数' },
tooltip: {},
xAxis: {
type: 'category',
data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
},
yAxis: {
type:'value'
},
series: [{
type: 'line',
data: [0,0, 0, 7, 0, 0,12],
smooth:true,
symbol: 'circle',
symbolSize: 6,
itemStyle:{
normal:{ color:'#fc8a0f',
lineStyle:{
color:'#ff9c35'
}
}
}
}], });
window.onresize=function(){
resizeMyChartContainer();
myChart.resize();
}
}
}
}
</script>
vue中echarts随窗体变化的更多相关文章
- Vue中echarts的基本用法
前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...
- 在Vue中echarts可视化组件的使用
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- vue中 eCharts 自适应容器
在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- vue中Echarts的使用-自选效果
由于项目要求使用数据图,于是我选择了我们的Echarts用来实现效果 一:全局安装Echarts npm install echarts --save(这个安装的是最新的版本有时候回报init未定义) ...
- Vue中echarts的使用
1.安装 npm install echarts --save 2. 导入并挂载 <template> <!-- 1. 为ECharts准备一个具备大小(宽高)的Dom --&g ...
- vue中监视对象内部变化的三种方法
一,对整个对象监视 watch:{ obj:{ handler(newV,oldV){ console.log('obj changed') }, deep: true,//深度遍历 immediat ...
随机推荐
- H5活动产品设计指南基础版
本文来自 网易云社区 . H5一般页面不会很多,看似简单,实际上会有很多细节需要注意,我自己在做过了几个H5之后,发现了一些常犯的问题,做了小结,希望给新开始做H5的产品相关的同学提供一些帮助. 首 ...
- [Perl]通过GD模块获取字符/汉字的点阵
原来Perl获取汉字的点阵如此简单 示例脚本应保存为utf8格式 Code: [全选] [展开/收缩] [Download] (Untitled.pl) use GD; use utf8; my $g ...
- Eclipse中mvn install 报错error in opening zip file
报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...
- 「HNOI 2013」比赛
题目链接 戳我 \(Solution\) 这道题观察数据范围发现很小,再看看题目可以发现是搜索. 这题纯搜索会\(T\)所以要加入适当剪枝 如果一个人后面的比赛都赢却依旧到不了目标分数,则直接\(re ...
- 201621123012《Java程序设计》第八周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:如果为空的时候 ...
- “全栈2019”Java第四十章:this关键字
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- bzoj 3669: [Noi2014]魔法森林(并查集+LCT)
Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...
- spring框架里面的注入?
在Spring框架里面注入可以通过1.setter方法注入:2.构造器注入:3.注入对象 在配置文件中配置如下: 前面两者不能同时注入: 入 如果前两者同时注入将会报错 将注入修改以后,如下图: 修改 ...
- python3入门之集合set
之前介绍python的数据结构时,没有介绍set(集合)现在在这里稍微介绍下: set原理 Python 还 包 含 了 一 个 数 据 类 型-- set ( 集 合 ) . 集 合 是 一 个 无 ...
- 01背包--hdu2639
hdu-2639 The title of this problem is familiar,isn't it?yeah,if you had took part in the "Rooki ...