<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随窗体变化的更多相关文章

  1. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

  2. 在Vue中echarts可视化组件的使用

    echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...

  3. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  4. vue中 eCharts 自适应容器

    在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...

  5. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  6. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  7. vue中Echarts的使用-自选效果

    由于项目要求使用数据图,于是我选择了我们的Echarts用来实现效果 一:全局安装Echarts npm install echarts --save(这个安装的是最新的版本有时候回报init未定义) ...

  8. Vue中echarts的使用

    1.安装 npm install echarts --save 2. 导入并挂载 <template>   <!-- 1. 为ECharts准备一个具备大小(宽高)的Dom --&g ...

  9. vue中监视对象内部变化的三种方法

    一,对整个对象监视 watch:{ obj:{ handler(newV,oldV){ console.log('obj changed') }, deep: true,//深度遍历 immediat ...

随机推荐

  1. python学习之路 八 :面向对象编程基础

    本节重点 了解面向对象.面向过程的区别 掌握什么是类,什么是对象 掌握如何定义及使用类和对象 了解类与对象间的关系 掌握类属性和实例属性 掌握绑定方法 一.编程范式 ​    ​编程即写程序or写代码 ...

  2. MongoDB高级知识-易使用

    MongoDB高级知识-易使用 mongodb是一个面向文档的数据库,而不是关系型数据库.不采用关系模型主要是为了获取更好的扩展性.当然还有其他的一些好处. 与关系型数据库相比,面向文档的数据库不再有 ...

  3. Data Base Oracle 常用命令

    Data Base  Oracle 常用命令 1.登录:(不需要密码,属于管理员权限) conn /as sysdba; 2.查看数据库存储位置: select name from v$datafil ...

  4. IO模型《五》异步IO

    Linux下的asynchronous IO其实用得不多,从内核2.6版本才开始引入.先看一下它的流程: 用户进程发起read操作之后,立刻就可以开始去做其它的事.而另一方面,从kernel的角度,当 ...

  5. [ActionScript 3.0] AS3 ServerSocket示例(官方示例)

    下面的示例创建一个套接字服务器.要使用该服务器,可将套接字绑定到本地端口,然后从其他应用程序连接到该端口.该服务器仅识别 UTF-8 字符串. package { import flash.displ ...

  6. 虚拟机安装CentOS,网络配置

    CentOS6和CentOS7,基础配置差不多. 安装CentOs6,过程:略: 安装完成后,系统默认启用动态ip,每次重启主机IP可能就会变化,搭配Xftp和Xshell工具会很难受,因此设置静态I ...

  7. TCP的超时与重传

    一.引言 对于每个TCP连接,TCP管理4个不同的定时器 重传定时器用于当希望收到另一端的确认. 坚持 (persist) 定时器使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口. 保活 (ke ...

  8. 针对myeclipse6.5无法自动生成toString方法

    public void getToStringSTR(){ Field[] fs = this.getClass().getDeclaredFields(); for (int i = 0; i &l ...

  9. Oracle中-事务-序列-视图-数据类型笔记

    事务(Transaction) 事务(Transaction)是一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位,是数据库环境中的逻辑工作单位. 事务是为了保证数据库的完整性 在o ...

  10. [HDU4035] Maze(概率DP)

    HDU4035 有\(n\)个房间 , 由\(n-1\)条隧道连通起来 , 实际上就形成了一棵树 , 从结点\(1\)出发 , 开始走 , 在每个结点\(i\)都有\(3\)种可能 : \(1.\)被 ...