Vue实现Echarts图表宽高自适应的实践

 更新时间:2021年11月15日 09:13:47   作者:明天也要努力  
本文主要介绍了Vue实现Echarts图表宽高自适应的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1. 安装并引入

npm install echarts --save
//main.js 

// import echarts from 'echarts'; 
import * as echarts from 'echarts'; // 如果安装的是echarts 5以上版本,则需此种方式引入
Vue.prototype.$echarts = echarts

2. 定义防抖函数

传送门:Vue中 实现函数的防抖、节流及应用场景

// utils/common.js

// 防抖
function _debounce(fn, delay = 300) {
  var timer = null;
  return function () {
    var _this = this;
    var args = arguments;
    if (timer) clearTimeout(timer); 
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, delay);
  };
}

export{
  _debounce,
}

3.  绘制图表代码

<template>
  <div class="charts">
    <div id="lineChart" :style="{ width: '100%', height: '400px' }"></div>
  </div>
</template>

<script>
import { _debounce } from '@/utils/common.js'
export default {
  data() {
    return {};
  },
  methods: {
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let lineChart = this.$echarts.init(document.getElementById("lineChart"));
      lineChart.setOption({
        title: {
          text: "雨量流量关系图",
          x: "center",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      });
    },
    resizeCharts:_debounce(function(){
      this.$echarts.init(document.getElementById('lineChart')).resize()
    },500)
  },
  mounted() {
    this.drawLine();
    window.addEventListener('resize',this.resizeCharts);
  },
  beforeDestroy () {
    window.addEventListener('resize',this.resizeCharts);
  },
};
</script>

init 方法

创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number,
    renderer?: string,
    useDirtyRect?: boolean, // 从 `v5.0.0` 开始支持
    width?: number|string,
    height?: number|string,
    locale?: string
}) => ECharts

dom:实例容器,一般是一个具有高宽的div元素。

注:如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.height,或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

ECharts 3 中支持直接使用canvas元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方。例如在 WebGL 中作为贴图,这跟使用 echartsInstance.getDataURL 生成图片链接相比可以支持图表的实时刷新。

theme:应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。

opts:附加参数。有下面几个可选项:

  • devicePixelRatio 设备像素比,默认取浏览器的值window.devicePixelRatio。
  • renderer 渲染器,支持 'canvas' 或者 'svg'。参见 使用 Canvas 或者 SVG 渲染。
  • useDirtyRect 是否开启脏矩形渲染,默认为false。参见 ECharts 5 新特性。
  • width 可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
  • height 可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
  • locale 使用的语言,内置 'ZH' 和 'EN' 两个语言,也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n。

如果不指定主题,也需在传入 opts 前先传入 null,如:const chart = echarts.init(dom, null, {renderer: 'svg'});

resize 方法官网解释

改变图表尺寸,在容器大小发生改变时需要手动调用。

(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean,
    animation?: {
        duration?: number
        easing?: string
    }
}) => ECharts

参数:

opts 可缺省。有下面几个可选项:

  • width: 可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。 
  • height: 可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
  • silent: 是否禁止抛出事件。默认为 false。
  • animation: resize 的时候是否应用过渡动画,包含时长duration和缓动easing两个配置,默认duration为 0,即不应用过渡动画。

提示:
有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布,或者在 opts 中显示指定图表高宽。
传送门:Echarts 官方文档

到此这篇关于Vue实现Echarts图表宽高自适应的实践的文章就介绍到这了,更多相关Vue Echarts图表宽高自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue列表数据删除后主动刷新页面及刷新方法详解

    vue列表数据删除后主动刷新页面及刷新方法详解

    这篇文章主要给大家介绍了关于vue列表数据删除后主动刷新页面及刷新方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 基于Vue3+TypeScript实现鼠标框选功能

    基于Vue3+TypeScript实现鼠标框选功能

    这篇文章主要介绍了基于Vue3+TypeScript实现鼠标框选功能,文中通过代码示例给大家讲解的非常纤细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • vant picker+popup 自定义三级联动案例

    vant picker+popup 自定义三级联动案例

    这篇文章主要介绍了vant picker+popup 自定义三级联动案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现动态列表尾部添加数据执行动画

    vue实现动态列表尾部添加数据执行动画

    这篇文章主要介绍了vue实现动态列表尾部添加数据执行动画方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 一文详解Vue响应式数据的原理

    一文详解Vue响应式数据的原理

    在vue2的响应式中,存在着添加属性、删除属性、以及通过下标修改数组,但页面不会自动更新的问题,而这些问题在vue3中都得以解决,本文就给大家详细的介绍一下Vue响应式数据原理,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • vue3+uniapp 上传附件的操作代码

    vue3+uniapp 上传附件的操作代码

    uni-file-picker搭配uni.uploadFile在使用问题上踩了不少坑,我至今还是没办法在不改uniapp源码基础上实现限制重复文件的上传,这篇文章介绍vue3+uniapp 上传附件的操作代码,感兴趣的朋友一起看看吧
    2024-01-01
  • 在vue中使用rules对表单字段进行验证方式

    在vue中使用rules对表单字段进行验证方式

    这篇文章主要介绍了在vue中使用rules对表单字段进行验证方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue列表自动滚动实例

    vue列表自动滚动实例

    这篇文章主要介绍了vue列表自动滚动实例代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 前端导出后端返回的excel文件方式

    Vue 前端导出后端返回的excel文件方式

    这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解vue-cli脚手架中webpack配置方法

    详解vue-cli脚手架中webpack配置方法

    这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论