在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 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
Javascript中With语句用法实例
May 14 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
轻松修复Discuz!数据库
2008/05/03 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python输入二维数组方法
2018/04/13 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python能否java成为主流语言吗
2020/06/22 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
教师岗位职责范本
2013/12/29 职场文书
打架检讨书50字
2014/01/11 职场文书
单位委托书范本
2014/04/04 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
孔庙导游词
2015/02/04 职场文书
三八妇女节寄语
2015/02/27 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
入团介绍人意见范文
2015/06/04 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS