快捷導(dǎo)航

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() {
      // 基于準(zhǔn)備好的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)用過渡動畫。

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

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

您可能感興趣的文章: