Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイトアドレス: https://echarts.apache.org/examples/zh/index.html

1. スキャフォールディングプロジェクトのアドレスを見つけ、cnpm install echarts を実行して、echarts コンポーネントをインストールします (スキャフォールディングのアドレスは、vue プロジェクトのアドレスです)

(E:\demo\vuepro) これは私のプロジェクトのアドレスです。vueproはプロジェクト名です。

2. オンデマンドインポートで開店時間を短縮

//echarts コンポーネントをインポートしますimport echarts from "echarts"
    // 基本テンプレートを導入する let echart = require('echarts/lib/echarts')
    //棒グラフコンポーネントを導入する require('echarts/lib/chart/bar')
    //ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip')
    'echarts/lib/component/title' が必要です

3. レポートグラフィックを収容するためのdivタグを準備する

div idはechartsプラグインをバインドするために使用されます

 <div id="chart" style="幅: 50%; 高さ: 400px;">
 </div>

4. スクリプトタグの内容

//echarts コンポーネントをインポートしますimport echarts from "echarts"
    // 基本テンプレートを導入する let echart = require('echarts/lib/echarts')
    //棒グラフコンポーネントを導入する require('echarts/lib/chart/bar')
    //ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip')
    'echarts/lib/component/title' が必要です
            エクスポートデフォルト{
                名前: 'アプリ'、
                データ（）{
                  戻る {
                     チャート列:null
                  }
                },
                方法:{
                  初期化データ(){
                    dt = document.querySelector("#boss") とします。

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption() は、
                       //例のテンプレート)

                  }
                },
                マウントされた(){
                    この.initData()
                }
             }

便宜上、Vue で echarts 視覚化コンポーネントを導入するための完全なテンプレートをここに用意しました。コピーしてそのまま使用できます。

<テンプレート>
    <div id="ボス" スタイル="幅: 500px;高さ: 500px;">
        
    </div>
</テンプレート>

<スクリプト>
    //echarts コンポーネントをインポートしますimport echarts from "echarts"
    // 基本テンプレートを導入する let echart = require('echarts/lib/echarts')
    //棒グラフコンポーネントを導入する require('echarts/lib/chart/bar')
    //ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip')
    'echarts/lib/component/title' が必要です
            エクスポートデフォルト{
                名前: 'アプリ'、
                データ（）{
                  戻る {
                     チャート列:null
                  }
                },
                方法:{
                  初期化データ(){
                    dt = document.querySelector("#boss") とします。
            
                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption() は、
                       //例のテンプレート)
            
                  }
                },
                マウントされた(){
                    この.initData()
                }
             }
</スクリプト>

<スタイル>
</スタイル>

例:

<テンプレート>
    <div id="ボス" スタイル="幅: 500px;高さ: 500px;">

    </div>
</テンプレート>

<スクリプト>
    「echarts」からechartsをインポートする
    // 基本テンプレートを導入する let echart = require('echarts/lib/echarts')
    //棒グラフコンポーネントを導入する require('echarts/lib/chart/bar')
    //ツールチップとタイトルコンポーネントを導入する require('echarts/lib/component/tooltip')
    'echarts/lib/component/title' が必要です
            エクスポートデフォルト{
                名前: 'アプリ'、
                データ（）{
                  戻る {
                     チャート列:null
                  }
                },
                方法:{
                  初期化データ(){
                    dt = document.querySelector("#boss") とします。

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption() は、
                    //以下はecharts視覚化コンポーネントです{
                          ツールチップ: {
                              トリガー: '軸'、
                              axisPointer: { // 軸を使用してツールチップをトリガーする
                                  type: 'shadow' // デフォルトは 'shadow'。'line' または 'shadow' も使用可能
                              }
                          },
                          伝説： {
                              データ: ['ダイレクト'、'メール広告'、'アフィリエイト広告'、'動画広告'、'検索エンジン']
                          },
                          グリッド: {
                              左: '3%'、
                              右: '4%'、
                              下: '3%'、
                              ラベルを含む: true
                          },
                          x軸:
                              タイプ: '値'
                          },
                          y軸: {
                              タイプ: 'カテゴリ',
                              データ: ['月', '火', '水', '木', '金', '土', '日']
                          },
                          シリーズ： [
                              {
                                  名前: 'ダイレクト'、
                                  タイプ: 'バー'、
                                  スタック: '合計',
                                  ラベル: {
                                      表示: 真
                                  },
                                  強調：
                                      焦点: 'シリーズ'
                                  },
                                  データ: [320, 302, 301, 334, 390, 330, 320]
                              },
                              {
                                  名前:「メール広告」
                                  タイプ: 'バー'、
                                  スタック: '合計',
                                  ラベル: {
                                      表示: 真
                                  },
                                  強調：
                                      焦点: 'シリーズ'
                                  },
                                  データ: [120, 132, 101, 134, 90, 230, 210]
                              },
                              {
                                  名前: 「アフィリエイト広告」
                                  タイプ: 'バー'、
                                  スタック: '合計',
                                  ラベル: {
                                      表示: 真
                                  },
                                  強調：
                                      焦点: 'シリーズ'
                                  },
                                  データ: [220, 182, 191, 234, 290, 330, 310]
                              },
                              {
                                  名前:「ビデオ広告」
                                  タイプ: 'バー'、
                                  スタック: '合計',
                                  ラベル: {
                                      表示: 真
                                  },
                                  強調：
                                      焦点: 'シリーズ'
                                  },
                                  データ: [150, 212, 201, 154, 190, 330, 410]
                              },
                              {
                                  名前:「検索エンジン」
                                  タイプ: 'バー'、
                                  スタック: '合計',
                                  ラベル: {
                                      表示: 真
                                  },
                                  強調：
                                      焦点: 'シリーズ'
                                  },
                                  データ: [820, 832, 901, 934, 1290, 1330, 1320]
                              }
                          ]
                      }
                      //コンポーネントはここで終了します)

                  }
                },
                マウントされた(){
                    この.initData()
                }
             }
</スクリプト>

<スタイル>
</スタイル>

表示効果:

これで、Vue で echarts 視覚化コンポーネントを使用する方法に関するこの記事は終了です。Vue echarts 視覚化コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: