在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 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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自定义函数之递归删除文件及目录
2010/08/08 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
一道python走迷宫算法题
2018/01/22 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python tkinter实现屏保程序
2019/07/30 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
应届生污水处理求职信
2013/11/06 职场文书
物业管理个人自我评价
2013/11/08 职场文书
公司总经理任命书
2014/06/05 职场文书
应聘教师自荐书
2014/06/16 职场文书
党员目标管理责任书
2014/07/25 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年组织部工作总结
2015/04/03 职场文书
党员带头倡议书
2015/04/29 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python 解决微分方程的操作(数值解法)
2021/05/26 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript