Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐

更新時間：2021年11月15日 09:13:47 作者：明天也要努力

本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1. 安裝并引入

npm install echarts --save

//main.js 

// import echarts from 'echarts'; 
import * as echarts from 'echarts'; // 如果安裝的是echarts 5以上版本，則需此種方式引入
Vue.prototype.$echarts = echarts

2. 定義防抖函數(shù)

傳送門：Vue中實現(xiàn)函數(shù)的防抖、節(jié)流及應(yīng)用場景

// 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: "雨量流量關(guān)系圖",
          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 方法

創(chuàng)建一個 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的高寬導(dǎo)致初始化失敗，這時候可以明確指定div的style.width和style.height，或者在div顯示后手動調(diào)用 echartsInstance.resize 調(diào)整尺寸。

ECharts 3 中支持直接使用canvas元素作為容器，這樣繪制完圖表可以直接將 canvas 作為圖片應(yīng)用到其它地方。例如在 WebGL 中作為貼圖，這跟使用 echartsInstance.getDataURL 生成圖片鏈接相比可以支持圖表的實時刷新。

theme：應(yīng)用的主題?？梢允且粋€主題的配置對象，也可以是使用已經(jīng)通過 echarts.registerTheme 注冊的主題名稱。

opts：附加參數(shù)。有下面幾個可選項：

devicePixelRatio 設(shè)備像素比，默認取瀏覽器的值window.devicePixelRatio。
renderer 渲染器，支持 'canvas' 或者 'svg'。參見使用 Canvas 或者 SVG 渲染。
useDirtyRect 是否開啟臟矩形渲染，默認為false。參見 ECharts 5 新特性。
width 可顯式指定實例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的寬度。
height 可顯式指定實例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的高度。
locale 使用的語言，內(nèi)置 'ZH' 和 'EN' 兩個語言，也可以使用 echarts.registerLocale 方法注冊新的語言包。目前支持的語言見 src/i18n。

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

resize 方法官網(wǎng)解釋

改變圖表尺寸，在容器大小發(fā)生改變時需要手動調(diào)用。

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

參數(shù)：

opts 可缺省。有下面幾個可選項：

width：可顯式指定實例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的寬度。
height：可顯式指定實例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的高度。
silent：是否禁止拋出事件。默認為 false。
animation： resize 的時候是否應(yīng)用過渡動畫，包含時長duration和緩動easing兩個配置，默認duration為 0，即不應(yīng)用過渡動畫。

提示：
有時候圖表會放在多個標簽頁里，那些初始隱藏的標簽在初始化圖表的時候因為獲取不到容器的實際高寬，可能會繪制失敗，因此在切換到該標簽頁時需要手動調(diào)用 resize 方法獲取正確的高寬并且刷新畫布，或者在 opts 中顯示指定圖表高寬。
傳送門：Echarts 官方文檔

到此這篇關(guān)于Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐的文章就介紹到這了,更多相關(guān)Vue Echarts圖表寬高自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: