目錄

• 1. 安裝並引入
• 2. 定義防抖函式
• 3. 繪製圖表程式碼
• init 方法
  
• resize 方法官網解釋
  

1. 安裝並引入

npm install echarts --save

//main. 

// import echarts from 'echarts'; 
import * as echarts from 'echarts'; // 如果安裝的是echarts 5以上版本，則需此種方式引入
.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(funcehPhueH
 
tion () {
      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',};
</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.widehPhueHth和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,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圖表寬高自適應內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！