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中 實(shí)現(xiàn)函數(shù)的防抖、節(jié)流及應(yīng)用場(chǎ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實(shí)例
      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)建一個(gè) ECharts 實(shí)例，返回 echartsInstance，不能在單個(gè)容器上初始化多個(gè) ECharts 實(shí)例。

(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：實(shí)例容器，一般是一個(gè)具有高寬的div元素。

注：如果div是隱藏的，ECharts 可能會(huì)獲取不到div的高寬導(dǎo)致初始化失敗，這時(shí)候可以明確指定div的style.width和style.height，或者在div顯示后手動(dòng)調(diào)用 echartsInstance.resize 調(diào)整尺寸。

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

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

opts：附加參數(shù)。有下面幾個(gè)可選項(xiàng)：

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

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

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

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

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

參數(shù)：

opts 可缺省。有下面幾個(gè)可選項(xiàng)：

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

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

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

最新評(píng)論