在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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
js select option对象小结
Dec 20 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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解析http获取的json字符串变量总是空白null
2015/03/02 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
Javascript的一种模块模式
2010/09/08 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
python异常和文件处理机制详解
2016/07/19 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
python实现微信自动回复功能
2018/04/11 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python制作词云图代码实例
2019/09/09 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
给校长的建议书400字
2014/05/15 职场文书
人力资源管理求职信
2014/08/07 职场文书
党员违纪检讨书
2015/05/05 职场文书
Python基础之进程详解
2021/05/21 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript