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

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 を応援してください。

以下もご興味があるかもしれません:
  • Vue で echarts チャート適応を使用するためのいくつかのソリューション
  • Vue での複数の echarts チャートの適応の問題に対する完璧なソリューション
  • Vue における echarts3.0 の適応型メソッド

<<:  ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

>>:  CSS の border 属性と display 属性の使い方の簡単な分析

推薦する

フレックスレイアウトではサブアイテムの高さを維持できる

Flex レイアウトを使用すると、水平に配置すると、すべての子項目の高さが同じになることがわかります...

CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

MYSQL の解凍版における中国語の文字化け問題の解決方法

MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

目次1. 技術の選択2. 技術的な実装vue-json-excelプラグインを使用して実装1. vu...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...

Ubuntu でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル

ユーザーのホーム ディレクトリがどんどん大きくなってきたら、ホーム ディレクトリを新しいパーティショ...

JavaScript を学ぶときに知っておくべき 3 つのヒント

目次1. 魔法の拡張演算子1. 配列をコピーする2. 配列を結合する3. オブジェクトを展開する2....

ウェブサイトを構築するときは、UTF-8 または GB2312 エンコードを使用する必要がありますか?

外国のウェブサイトを開くと文字化けした文字が表示されることが多く、また、英語以外の外国のウェブサイト...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

docker+gitlab+gitlab-runnerの詳細なデプロイメント

環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...

UbuntuへのDocker CEのインストール

この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...