<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. db事务级别及锁

    相关sql 事务A BEGIN TRANSACTION --执行修改 获取排他锁 UPDATE Product SET Price = 10 WHERE Id = 1 --阶段2 UPDATE Pro ...

  2. BF、kmp算法

    第七周 字符串匹配 BF算法,kmp算法 BF:时间复杂度为 O(m*n) int Index_BF(SString S, SString T, int pos) { ; while (i <= ...

  3. maven-compiler-plugin 版本错误解决方法

    项目执行Maven build后出现WARNING提示.报如信息如下,根据报错信息猜测是maven-compiler-plugin的版本信息问题 [WARNING] [WARNING] Some pr ...

  4. Tiled结合Unity实现瓦片地图——Tiled2Unity篇

    本系列文章由Aimar_Johnny编写,欢迎转载,转载请标明出处,谢谢. http://blog.csdn.net/lzhq1982/article/details/75356478 前段时间应公司 ...

  5. [Maven实战-许晓斌]-[第三章] Mave使用入门二(在IDE中的使用) [第四章] 案例的背景介绍

    创建maven项目

  6. 洛谷P5158 【模板】多项式快速插值

    题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...

  7. 为 JSON 字符串创建对象

    ---------------------------页面效果---------------------------------- ---------------------------代码实现--- ...

  8. 北京DNS

    202.106.0.20 202.106.196.115 202.106.46.151

  9. Angular material mat-icon 资源参考_File

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  10. 【Template】Miller Rabin

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...