在vue中实现echarts随窗体变化


Posted in Javascript onJuly 27, 2020

在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>

补充知识:echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)

问题提出:

使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果。

在vue中实现echarts随窗体变化

原因分析及解决方案:

echars的图标实例事实上并没有主动的去绑定resize()事件,就是说显示区域的大小改变内部并不知道,当你需要去做一些自适应的效果的时候,需要主动绑定这个时间才能达到自使用的效果,常见的如window.onresize = myChart.resize()

示例:

var map5 = echarts.init(document.getElementById('map5'));
  var option5 = {
    backgroundColor: '#def1f9',
    color: ['#c23531', '#1875ff'],
    title: {
      left: 10,
      top: 10,
      text: 'Bill charts for the past year'
    },
    // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'],
    legend: {
      top: 30,
      right: 30
    },
    tooltip: {},
 
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
      {type: 'bar'},
      {type: 'bar'}
    ]
  }
  map5.setOption(option5);
 
  window.onresize = function () {
    setTimeout(function () { 
      map1.resize()
      map2.resize()
      map3.resize()
      map4.resize()
      map5.resize()
    },10)
  }

重点:

window.onresize = function () {
   map1.resize() ; // 如果有多个图标变动,可写多个
}

以上这篇在vue中实现echarts随窗体变化就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 #Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP中soap的用法实例
2014/10/24 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python集合用法实例分析
2015/05/30 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
上班玩手机检讨书
2014/02/17 职场文书
市政管理求职信范文
2014/05/07 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server