1. <div id="myChart" :style="{width: '100%', height: '345px'}"></div>

<script>
export default {

  1. mounted(){
  2. this.drawLine();
  3. },
  4. methods: {
  5. drawLine(){
  6. var myChartContainer = document.getElementById('myChart');
    //用于使chart自适应宽度,通过窗体宽计算容器高宽
  7. var resizeMyChartContainer = function(){
  8. myChartContainer.style.width=(document.body.clientWidth-75)+'px'
  9. }
    //设置容器高宽
  10. resizeMyChartContainer()
  11. // 基于准备好的dom,初始化echarts实例
  12. var myChart = this.$echarts.init(myChartContainer)
  13.  
  14. // 绘制图表
  15. myChart.setOption({
  16. title: { text: '启动次数' },
  17. tooltip: {},
  18. xAxis: {
  19. type: 'category',
  20. data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
  21. },
  22. yAxis: {
  23. type:'value'
  24. },
  25. series: [{
  26. type: 'line',
  27. data: [0,0, 0, 7, 0, 0,12],
  28. smooth:true,
  29. symbol: 'circle',
  30. symbolSize: 6,
  31. itemStyle:{
  32. normal:{
  33.  
  34. color:'#fc8a0f',
  35. lineStyle:{
  36. color:'#ff9c35'
  37. }
  38. }
  39. }
  40. }],
  41.  
  42. });
  43. window.onresize=function(){
  44. resizeMyChartContainer();
  45. myChart.resize();
  46. }
  47. }
  48. }
    }
    </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. Linux Centos下SQL Server 2017安装和配置

    说到SQL Server服务,我们大家都知道是Microsoft公司的数据库服务,当然说到数据库,现在主要分为三大商:1:Oracle.2:Msql Server.3:Mysql:三种数据库在当下环境 ...

  2. Python Python入门

    Python入门 今天开会的时候,领导说起python,说的那个叫人心动,于是乎就有了下面的东西.起步开始---------------- 一.概念: 参考:http://www.runoob.com ...

  3. UWP平台Taglib编译(2)

    此文已由作者郑博授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 #endif  // _WIN32 } class FileStream::FileStreamPrivate ...

  4. 【09】循序渐进学 docker:docker swarm

    写在前面的话 至此,docker 的基础知识已经了解的差不多了,接下来就来谈谈对于 docker 容器,我们如何来管理它. docker swarm 在学习 docker swarm 之前,得先知道容 ...

  5. windows server2008 r2安装DNS服务器

    1.开始->管理工具->服务器管理器 2.角色->添加角色 3.服务器角色->DNS服务器 4.一直点击下一步,直至安装完成. (确认步骤时会提示,可能会需要重启服务器) 安装 ...

  6. Java 之封装

    预备知识: public:可以被所有其他类所访问 private:只能被自己访问和修改 protected:自身.子类及同一个包中类可以访问 default:同一包中的类可以访问,声明时没有加修饰符, ...

  7. Kettle导入数据到Hive 出现多余的几行全部是null值的情况

    Kylin构建Cube的时候老是报错,说是有空值,其实源数据中是不存在空值的.为什么建Cube的时候会有呢? 执行完毕后使用Hive查询发现多了好几行全部是null的行. 这在源数据中是不存在的.分析 ...

  8. day0203 (whil else)

    count = 0while count <= 5 : count += 1 if count == 3:break print("Loop",count) else: pr ...

  9. Jenkins Slave Nodes – using the Swarm Plugin

    link: http://www.donaldsimpson.co.uk/2013/03/18/jenkins-slave-nodes-using-the-swarm-plugin/ I’ve bee ...

  10. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...