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 属性の使い方の簡単な分析

推薦する

Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...

nginx.pid を開く際の失敗と無効の解決策

目次1. 問題の説明2. 問題分析3. 解決策解決策1: ディレクトリを作成する解決策2: 構成ファ...

dl、dt、dd はいつ使用するのが適切ですか?

dl:定義一覧定義リストdt:定義タイトルタイトルを定義するdd:定義説明定義の説明dt は情報のタ...

Docker 上で Redis クラスターを構築する

目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...

Ubuntu で中国語入力方法が使えない場合の解決策

Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...

DockerコンテナがJupyterにアクセスできない問題の解決策

このプロジェクトでは、環境を構築するために Docker コンテナを使用します。Dockerfile...

MySQL 学習: 初心者のための 3 つのパラダイム

目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...

Vue2とVue3の兄弟コンポーネント通信バスの違いと使い方

目次vue2.x vue3.x tiny-emitterプラグインの使用Mittプラグインの使用vu...

image/x-png の ContentType について

これにより、png ファイルのアップロードも不可能になりました (後で情報を調べたところ、レジストリ...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

Centos7.6にTomcat-8.5.39をインストールする方法

Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...

jsを呼び出すいくつかの方法が整理され、使用が推奨されています

a タグではクリック イベントがよく使用されます。 1. href="javascript...

Nginx 構成の実装 HTTPS セキュリティ認証

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...