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

目录
  • 1. 安装并引入
  • 2. 定义防抖函数
  • 3.  绘制图表代码
    • init 方法
    • resize 方法官网解释

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图表宽高自适应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue使用echarts图表自适应的几种解决方案

    1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活): let myChart1 = echarts.init(document.getElementById(dom1)) let m

  • vue中echarts3.0自适应的方法

    前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 import 'echarts/lib/chart/line' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legendScroll' 然后发现在缩放浏览器窗口时折线图并不会自适应

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

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

    目录 1. 安装并引入 2. 定义防抖函数 3.  绘制图表代码 init 方法 resize 方法官网解释 1. 安装并引入 npm install echarts --save //main.js // import echarts from 'echarts'; import * as echarts from 'echarts'; // 如果安装的是echarts 5以上版本,则需此种方式引入 Vue.prototype.$echarts = echarts 2. 定义防抖函数 传送门:

  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度: imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) } 2.现在: .imgClass{ width: 100vw; } 解析: CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 "vw"="view width"&qu

  • vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) //根据窗口的大小变动图表 --- 重点 window.onresize = function(){ myChart.resize(); //myChart1.resize(); //若有多个图表变动,可多写 } 代码如下: mounted() { con

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • vue中Echarts图表宽度没占满的问题

    目录 vue Echarts图表宽度没占满 解决方法 vue Echarts图表宽度自适应,亲测有效 实现宽度自适应语句 vue Echarts图表宽度没占满 显示效果: 经过测试,当把宽度写成固定px的时候,就能正确渲染. 解决方法 1.宽高写成固定px,针对宽度不需要自适应的大屏. 2.当宽度需要自适应,父元素需要设置宽高,可以使用$nextTick 当元素宽度发生改变,只需要等待DOM渲染完成在渲染图表,这样就不会出现问题了. 相似案例: 当点击按钮使用v-if进行图表切换,同样会使出现宽

  • vue 检测用户上传图片宽高的方法

    需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限,可以动态修改这个对象数组. data: picArray:[ { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { width:0, height:0 }, { wi

  • Dropify.js图片宽高自适应的方法

    最近发现了一个比较好用的图片上传插件, Dropify.js ,具体使用方法挺简单的,这里就不介绍了. 但是由于我希望图片样式是宽度固定,高度自适应的,而这个插件好像无法自适应高度,只能在固定的区域内显示图片,看的非常不舒服. 看了一下插件的源码,发现可以在预览图片时,调整图片高度.需要修改css和js,下面贴下代码. <!-- 插件容器 --> <div class="blog-title-img clear"> <input type="fi

  • Vue中的echarts图表如何实现loading效果

    目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts  data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi

随机推荐