Vueのプロジェクトでechartsを使用します

第一の方法は、直接echartsを導入しました

1 。プロジェクトのインストールecharts依存
    NPMインストールecharts - 保存
2 グローバルmain.js.の中に組み込まれた
    "echarts"からインポートecharts ;  。Vue.prototype = $ echarts Echarts。

<テンプレート> 
  の<divのid = "アプリ"> 
    <div要素のid = "メイン"スタイル= "幅：600PX;高さ：400ピクセル;"> </ div> 
  </ div> 
</テンプレート>

JS部分のスクリプトコード

<スクリプト> 
エクスポートデフォルト{ 
  名： "アプリケーション" 、
  メソッド：{ 
    drawChart（）{ 
      // ベースの準備ができて、DOM、インスタンスの初期化がecharts 
      レットを= myChart この $ echarts.init（のdocument.getElementById（ "メイン"。 ））;
       // 指定されたデータと設定項目のチャート 
      LETオプション= { 
        タイトル：{ 
          テキスト： "模範的な開始EChartsの取得" 
        }、
        ツールヒント：{}、
        レジェンド：{ 
          データ：[ "販売" ] 
        }、
        XAXIS：{ 
          データ：[「シャツ「」セーター「」シフォンシャツ「」パンツ」「ハイヒール」、「靴下」 ]
        }、
        YAXIS：{}、
        シリーズ：[ 
          { 
            名： "営業" 、
            タイプ： "バー" 、
            データ：[ 5、20、36であり、10、10、20 ] 
          } 
        ] 
      }; 
      //は単に指定された構成データ項目を使用してチャートを表示します。
      myChart.setOption（オプション）; 
    } 
  }、 
  （）{ マウント
    この.drawChart（）; 
  } 
};
 </ SCRIPT>

 

第二の方法は、成分のVue-EChartsを使用して

取り付けアセンブリ：ステップ

NPMインストール衝撃echarts -S

ステップ2：コンポーネントを使用します

<テンプレート> 
  の<divのid = "アプリ"> 
    <V-チャートクラス= "私のチャート"：オプション= "バー" /> 
  </ div> 
</テンプレート> 
の<script> 
からインポートECharts VUE-echarts /コンポーネント」 / ECharts」; 
インポート "echarts / libに/チャート/バー" 。
輸出のデフォルト{ 
  名： "アプリケーション" 、
  コンポーネント：{
     "V-チャート" ：ECharts 
  }、
  データ：機能（）{
     リターン{ 
      バー：{ 
        タイトル：{ 
          テキスト： "ECharts入门示例" 
        }、 "販売" ] 
        }、
        XAXIS：{ 
          データ：[ "シャツ"、 "セーター"、 "シフォンシャツ"、 "パンツ"、 "靴"、 "靴下" ] 
        }、
        YAXIS：{}、
        シリーズ：[ 
          { 
            名： "営業" 、
            タイプ： "バー" 、
            データ：[ 5、20、36、10、10、20である。] 
          } 
        ] 
      } 
    }; 
  } 
};
 </ SCRIPT> 
<スタイル> 
.MY - チャート{ 
  幅800ピクセル、
  高さ：500pxなど。
}
 </スタイル>