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: 追加パラメータ。いくつかのオプションがあります:
テーマを指定しない場合は、次のように、opts を渡す前に null を渡す必要があります: const chart = echarts.init(dom, null, {renderer: 'svg'}); リサイズ方法公式サイト説明チャートのサイズを変更します。コンテナのサイズが変更された場合は、この関数を手動で呼び出す必要があります。 (オプション: { 幅?: 数値|文字列, 高さ?: 数値|文字列, サイレント?: ブール値、 アニメーション?: 期間?: 数値 イージング?: 文字列 } }) => ECharts パラメータ: opts は省略できます。いくつかのオプションがあります:
ヒント: これで、Vue を使用して Echarts チャートの幅と高さの適応を実装する方法に関するこの記事は終了です。Vue Echarts チャートの幅と高さの適応の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。 以下もご興味があるかもしれません:
|
<<: ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル
>>: CSS の border 属性と display 属性の使い方の簡単な分析
p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...
概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...
目次1. 問題の説明2. 問題分析3. 解決策解決策1: ディレクトリを作成する解決策2: 構成ファ...
dl:定義一覧定義リストdt:定義タイトルタイトルを定義するdd:定義説明定義の説明dt は情報のタ...
目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...
Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...
このプロジェクトでは、環境を構築するために Docker コンテナを使用します。Dockerfile...
目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...
目次vue2.x vue3.x tiny-emitterプラグインの使用Mittプラグインの使用vu...
これにより、png ファイルのアップロードも不可能になりました (後で情報を調べたところ、レジストリ...
目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...
a タグではクリック イベントがよく使用されます。 1. href="javascript...
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...