VueプロジェクトでのEchartsの簡単な使用

Echartsの依存関係をインストールする

npm install echarts -S

グラフを作成する

まず
、main.jsでグローバルに導入する必要があります

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

index.vue内

<template> 
  <div id = "myChart"：style = "{width： '500px'、height： '500px'}"> </ div> 
</ template> 

<script> 
export default { 
  data（）{ 
    return { 
    } 
  }、
  mounted（）{ 
    this .drawLine（）; 
  }、
  メソッド：{ 
    drawLine（）{ 
        // 初期化Echartsインスタンス 
        let myChart = this。$ echarts.init（document.getElementById（ 'myChart' ））
         // チャート
        myChartを描画する.setOption（{ 
            title：{text： 'VueのシンプルなEcharts' }、
            ツールチップ：{}、 
            xAxis：{
                データ：[ "シャツ"、 "セーター"、 "シフォンシャツ"、 "パンツ"、 "靴"、 "靴下" ] 
            }、
            YAXIS：{}、
            シリーズ：[{ 
                名： '販売' 、
                種類： 'bar' 、
                データ：[ 5、20、36、10、10、20 ] 
            }] 
        }）; 
    } 
  } 
}
 </ script>

仕上げ：上