VueでEchartsチャートの幅と高さの適応を実現する実践

1. インストールとインポート

npm インストール echarts --save

//メイン.js 

// 'echarts' から echarts をインポートします。 
import * as echarts from 'echarts'; // echarts 5以上をインストールした場合は、この方法でインポートする必要があります Vue.prototype.$echarts = echarts

2. 手ぶれ補正機能を定義する

ポータル: Vue でアンチシェイク、スロットリング、および関数のアプリケーションシナリオを実装する

// utils/common.js

// 手ぶれ補正関数 _debounce(fn, delay = 300) {
  var タイマー = null;
  関数を返す（）{
    var _this = これ;
    var args = 引数;
    if (タイマー) clearTimeout(タイマー); 
    タイマー = setTimeout(関数() {
      fn.apply(_this, args);
    }、 遅れ）;
  };
}

輸出{
  _デバウンス、
}

3. チャートコードを描く

<テンプレート>
  <div class="charts">
    <div id="lineChart" :style="{ 幅: '100%', 高さ: '400px' }"></div>
  </div>
</テンプレート>

<スクリプト>
'@/utils/common.js' から { _debounce } をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {};
  },
  メソッド: {
    描画線() {
      // 準備された dom に基づいて echarts インスタンスを初期化します。let lineChart = this.$echarts.init(document.getElementById("lineChart"));
      ラインチャート.setOption({
        タイトル：
          テキスト:「降雨量と流量の関係図」、
          x:「中心」、
        },
        x軸:
          タイプ:「カテゴリー」、
          データ: ["月", "火", "水", "木", "金", "土", "日"],
        },
        y軸: {
          タイプ: "値",
        },
        シリーズ： [
          {
            データ: [820, 932, 901, 934, 1290, 1330, 1320],
            タイプ: "line",
          },
        ]、
      });
    },
    resizeCharts:_debounce(function(){
      this.$echarts.init(document.getElementById('lineChart')).resize()
    },500)
  },
  マウント() {
    この.drawLine();
    window.addEventListener('resize',this.resizeCharts);
  },
  破棄前() {
    window.addEventListener('resize',this.resizeCharts);
  },
};
</スクリプト>

init メソッド

ECharts インスタンスを作成し、echartsInstance を返します。単一のコンテナーで複数の ECharts インスタンスを初期化することはできません。

(dom: HTMLDivElement|HTMLCanvasElement、テーマ?: Object|文字列、オプション?: {
    デバイスピクセル比?: 数値、
    レンダラー?: 文字列、
    useDirtyRect?: boolean, // `v5.0.0` 以降でサポートされています width?: number|string,
    高さ?: 数値|文字列,
    ロケール?: 文字列
}) => ECharts

dom: インスタンスコンテナー。通常は高さと幅を持つ div 要素です。

注意: div が非表示の場合、ECharts は div の高さと幅を取得できず、初期化に失敗する可能性があります。この場合、div の style.width と style.height を明示的に指定するか、div が表示された後で echartsInstance.resize を手動で呼び出してサイズを調整することができます。

ECharts 3 では、キャンバス要素をコンテナーとして直接使用することがサポートされており、チャートを描画した後、キャンバスを画像として他の場所に直接適用できます。たとえば、WebGL でテクスチャとして使用すると、echartsInstance.getDataURL を使用して画像リンクを生成する場合と比較して、チャートのリアルタイム更新をサポートできます。

theme: アプリケーションのテーマ。テーマ構成オブジェクト、または echarts.registerTheme を通じて登録されたテーマ名にすることができます。

opts: 追加パラメータ。いくつかのオプションがあります:

devicePixelRatio デバイスのピクセル比。デフォルト値はブラウザの window.devicePixelRatio です。
レンダラーレンダラー。'canvas' または 'svg' をサポートします。 Canvas または SVG を使用したレンダリングを参照してください。
useDirtyRect ダーティレクタングルレンダリングを有効にするかどうか。デフォルト値は false です。 ECharts 5 の新機能をご覧ください。
width を使用すると、インスタンスの幅をピクセル単位で明示的に指定できます。入力値が null/undefined/'auto' の場合、DOM (インスタンスコンテナ) の幅が自動的に取得されることを意味します。
height インスタンスの高さをピクセル単位で明示的に指定できます。渡された値が null/undefined/'auto' の場合、DOM (インスタンスコンテナー) の高さが自動的に取得されることを意味します。
ロケールが使用する言語には、「ZH」と「EN」の 2 つの組み込み言語があり、echarts.registerLocale メソッドを使用して新しい言語パックを登録することもできます。現在サポートされている言語については src/i18n を参照してください。

テーマを指定しない場合は、次のように、opts を渡す前に null を渡す必要があります: const chart = echarts.init(dom, null, {renderer: 'svg'});

リサイズ方法公式サイト説明

チャートのサイズを変更します。コンテナのサイズが変更された場合は、この関数を手動で呼び出す必要があります。

(オプション: {
    幅?: 数値|文字列,
    高さ?: 数値|文字列,
    サイレント?: ブール値、
    アニメーション？：
        期間?: 数値
        イージング?: 文字列
    }
}) => ECharts

パラメータ:

opts は省略できます。いくつかのオプションがあります:

width: インスタンスの幅をピクセル単位で明示的に指定できます。入力値が null/undefined/'auto' の場合、DOM (インスタンスコンテナ) の幅が自動的に取得されることを意味します。
height: インスタンスの高さをピクセル単位で明示的に指定できます。渡された値が null/undefined/'auto' の場合、DOM (インスタンスコンテナー) の高さが自動的に取得されることを意味します。
silent: イベントのスローを禁止するかどうか。デフォルト値は false です。
アニメーション: サイズ変更時に遷移アニメーションを適用するかどうか (期間とイージング構成を含む)。デフォルトの期間は 0 で、遷移アニメーションは適用されません。

ヒント：
チャートは複数のタブに配置されることがあります。チャートを初期化する際、最初は非表示のタブはコンテナの実際の高さと幅を取得できないため、描画に失敗することがあります。そのため、タブに切り替える際には、手動で resize メソッドを呼び出して正しい高さと幅を取得してキャンバスを更新するか、opts で指定したチャートの高さと幅を表示する必要があります。
ポータル: Echarts 公式ドキュメント

これで、Vue を使用して Echarts チャートの幅と高さの適応を実装する方法に関するこの記事は終了です。Vue Echarts チャートの幅と高さの適応の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません: