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 つの現在の制限方法についての簡単な説明

推薦する

JavaScript を使用したコマンドライン アプリケーションの構築

目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...

Vue2 キューブUI 時間セレクターの詳細な説明

目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

Typescript の as、疑問符、感嘆符の詳細な説明

1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)

まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...

チャットバブル効果を実現するCSS

1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...

CSS ボックスモデル内のパディングと略語の詳細な説明

上図のように、パディング値は時計回り(右上、右下)の複合属性であり、パディングの内側の余白がボックス...

フロントエンドAIカットのコツ(体験談)

AI 画像の切り取りは PS と連携する必要があります。まず、スライスするレイヤーを選択し、それを...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

docker のインストールが完了し、bridge-nf-call-iptables が無効であると報告される問題を解決します

Centos マシンで docker のインストールが完了したら、docker info コマンドを...

Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...

W3C チュートリアル (14): W3C RDF および OWL アクティビティ

RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...

CSS3 レーダースキャンマップのサンプルコード

CSS3 を使用して、クールなレーダースキャン画像を実現します。 コード上で直接: // インデック...