<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. LEFT JOIN与RIGHT JOIN学习笔记

    SELECT COUNT(*) FROM [tbiz_PuzzleBasic] SELECT A.BasicID,A.Name,A.Gender,B.WorkID,B.Company,B.Positi ...

  2. 记一次 Confluence 被攻击事件

    故事开始 4 月 14 日,星期天,天气不好,呆在家玩 LOL,正 Happy 的时候同事打电话给我,说 Confluence 看文档的时候挂了,报错:502. 一寻思,不就挂了吗,小意思,重启呗,于 ...

  3. CookieJar和HTTPCookieProcessor

    CookieJar和HTTPCookieProcessor 我们在使用爬虫的时候,经常会用到cookie进行模拟登陆和访问.在使用urllib库做爬虫,我们需要借助http.cookiejar库中的C ...

  4. “全栈2019”Java第七十四章:内部类与静态内部类相互嵌套

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. Elasticsearch 5.4.1 安装简易文档

    1. 系统安装JDK 1.8.0_131或以上版本的JDK 2. 创建软件安装目录 # mkdir -p /opt/software3. 创建elk用户,新版的ELK不在支持使用root账户运行程序, ...

  6. python 数据分析 文章集锦

    文本分析: re&jieba模块  使用 正则表达式 和 中文处理模块jieba 原文地址:https://www.cnblogs.com/minutesheep/p/10357209.htm ...

  7. P3267 [JLOI2016/SHOI2016]侦察守卫

    $ \color{#0066ff}{ 题目描述 }$ 小R和B神正在玩一款游戏.这款游戏的地图由N个点和N-1条无向边组成,每条无向边连接两个点,且地图是连通的.换句话说,游戏的地图是一棵有N个节点的 ...

  8. P4173 残缺的字符串

    题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...

  9. 使用canvas实现画中画效果的H5

    最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...

  10. 海思3519A上移植OpenCV3.x

    环境安装与准备 下载opencv3.4.1. 或者 下载opencv3.2.0. 进入到opencv所在的目录新建目录build,install 安装cmake: apt-get install cm ...