vue2 vue3 での Echarts の詳細な使用方法

vue2 vue3 での Echarts の詳細な使用方法

1. インストール

npm インストール echarts --save

2. vue2でEchartsを使用する

main.jsファイル内

// echarts をインポート
'echarts' から echarts をインポートします
Vue.prototype.$echarts = echarts 

コンテナが与えられた場合

<div id="myChart" :style="{幅: '300px', 高さ: '300px'}"></div>

echarts初期化はフック関数mounted()で行う必要があります。この関数は、 el が新しく作成されたvm.$elに置き換えられ、インスタンスにマウントされた後に呼び出されます。

// 基本テンプレートを導入する let echarts = require('echarts/lib/echarts')

//棒グラフコンポーネントを導入する require('echarts/lib/chart/bar')

//ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip')
'echarts/lib/component/title' が必要です

エクスポートデフォルト{
  名前: 'こんにちは',
  データ() {
    戻る {
      メッセージ: 'Vue.js アプリへようこそ'
    }
  },
  マウント() {
    この.drawLine();
  },
  メソッド: {
    描画線() {
      // 準備された DOM に基づいて、echarts インスタンスを初期化します。let myChart = echarts.init(document.getElementById('myChart'))
      // チャートのタイトルを描画: {
        テキスト: 「折れ線グラフの積み重ね」
    },
    ツールチップ: {
        トリガー: '軸'
    },
    伝説: {
        データ: ['メールマーケティング'、'アフィリエイト広告'、'ビデオ広告'、'ダイレクトアクセス'、'検索エンジン']
    },
    グリッド: {
        左: '3%'、
        右: '4%'、
        下: '3%'、
        ラベルを含む: true
    },
    ツールボックス:
        特徴:
            画像として保存: {}
        }
    },
    x軸:
        タイプ: 'カテゴリ',
        境界ギャップ: false、
        データ: ['月曜日'、'火曜日'、'水曜日'、'木曜日'、'金曜日'、'土曜日'、'日曜日']
    },
    y軸: {
        タイプ: '値'
    },
    シリーズ: [
        {
            名前:「電子メールマーケティング」
            タイプ: 'line'、
            スタック: '合計金額'、
            データ: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            名称:「アライアンス広告」
            タイプ: 'line'、
            スタック: '合計金額'、
            データ: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            名前:「ビデオ広告」
            タイプ: 'line'、
            スタック: '合計金額'、
            データ: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            名前: 「直接アクセス」
            タイプ: 'line'、
            スタック: '合計金額'、
            データ: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            名前:「検索エンジン」
            タイプ: 'line'、
            スタック: '合計金額'、
            データ: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
    }
  }
}

3. vue3でEchartsを使用する

setupにはthisがなく、まだレンダリングされていないため、 provide/injectを使用してsetupechartを導入できます。

ルートコンポーネント(通常はApp.vue)にechartを導入します。

'echarts' から * を echarts としてインポートします
'vue' から { provide } をインポートします
 
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    provide('echarts',echarts) //提供する
  },
  コンポーネント:
  }
}

ここで注意すべき点は、 import * as echarts from 'echarts'あり、 import echarts from 'echarts'はないことです。これは、echarts バージョン 5.0 のインターフェースが次のようになっているため、エラーが発生します。

輸出 { 
 EChartsFullOptionをEChartsOptionとして、 
 接続する、 
 切断、 
 処分する、
 getInstanceByDom、 
 IDによるインスタンス取得、 
 取得マップ、 
 初期化、
 登録ロケール、 
 レジスタマップ、 
 登録テーマ 
 };

使用する必要があるページでdivを定義します

<div id="ホームページトラフィックチャート" スタイル="幅: 600px; 高さ: 280px">

次に、Echartsを使用する必要があるページに挿入します。

エクスポートデフォルト{
  名前: 'data_page',
  設定 () {
    const トラフィックデータ = ref({})
    const echarts = inject('echarts')
    マウント時(() => {
      const myChart = echarts.init(document.getElementById('home-page-traffic_chart'))
      // チャートを描画する myChart.setOption({
        タイトル:
          テキスト: 「今日の通話統計」
        },
        ツールチップ: {
          トリガー: '軸'、
          軸ポインタ:
            タイプ: '影'
          }
        },
        グリッド: {
          左: '3%'、
          右: '4%'、
          下: '3%'、
          ラベルを含む: true
        },
        x軸: [
          {
            タイプ: 'カテゴリ',
            データ: ['月', '火', '水', '木', '金', '土', '日'],
            軸目盛り: {
              ラベルに合わせる: true
            }
          }
        ]、
        y軸: [
          {
            タイプ: '値'
          }
        ]、
        シリーズ: [
          {
            名前: 「直接アクセス」
            タイプ: 'バー'、
            バー幅: '60%',
            データ: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
      window.onresize = 関数 () {
        myChart.サイズ変更()
      }
    })
    戻る {
    }
  }

}

効果画像:

以下もご興味があるかもしれません:
  • vue で vue-echarts-v3 を使用するサンプルコード
  • Echarts を使用して棒グラフを描く vue の詳細な説明
  • Django での視覚化に echarts を使用する練習
  • WeChatミニプログラムの基本チュートリアル:Echartの使用
  • ネイティブechartとvue-echartの使用に関する詳細な説明

<<:  MySQL サブクエリとグループ化されたクエリ

>>:  Nginx における 2 つの現在の制限方法についての簡単な説明

推薦する

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

Excel をインポートするときに js で時間を変換する正しい方法について

目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

Ubuntu 20.04 デスクトップのインストールとルート権限の有効化および SSH インストールの詳細

記事は主にUbuntu 20.04の簡単なインストールプロセスを記録し、インストール後に国内ソースを...

MySQL マスタースレーブ同期メカニズムと同期遅延問題追跡プロセス

序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...

Nodejs のグローバル変数とグローバルオブジェクトの知識ポイントと使用方法の詳細

1. グローバルオブジェクトすべてのモジュールは呼び出すことができます1) global: ブラウザ...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

MySQL 5.6 のインストール手順(画像とテキスト付き)

MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...

Vue 実践における実用的な小さな魔法のまとめ

初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

クラウドサーバーパゴダパネルの詳細なインストール手順

目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...

Vueプロジェクトが完了した後にプロジェクトを最適化する方法の例

目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...