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を使用してsetupにechartを導入できます。

ルートコンポーネント（通常は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.サイズ変更()
      }
    })
    戻る {
    }
  }

}

効果画像: