VUE使用echartsは、円グラフを描きます

echarts中国の文書住所：https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

需要の方法によって導入

Echartsのインストールパッケージが言うことではなく、上のコードがあります

今日見に円グラフを描画する方法

<テンプレート> 
  の<div> 
    <divのクラス= "PIE"> 
        <DIV ID = "PIE1"> 
            <！ - EChartsを準備するためには、DOMのサイズ（幅と高さ）含まれています- > 
            <DIV ID = "MAIN1"スタイルを= "フロート：左;幅：100％;高さ：によって300ピクセル"> </ div> 
        </ div> 
        <DIV ID = "PIE2"> 
            <DIV ID = "MAIN2"スタイル=「フロート：左;幅：100％。高さ：300ピクセル「による> </ div> 
        </ div> 
    </ div> 
  </ div> 
</テンプレート> 

<SCRIPT> // 導入、実質的にテンプレート 
のlet echartsの=は（ 'echarts /必要 libに/ echarts'を）
 // に導入パイ形状のグラフ成分 
（ザが必要「echarts / LIB /図表/ PIE」）
 // 導入タイトルバルーンアセンブリと
必要（ 'echarts / libに/コンポーネント/ツールチップ' ）
（必要 'echarts / libに/コンポーネント/タイトル' ）


エクスポートデフォルト{ 
  作成した（）{ 
  }、
  {）（マウント
    この; .initData（）
  }、
  {：メソッド
    // 初期化データ
    initData（）{
       // ベース準備DOM、インスタンスの初期化echarts 
      するvar = echarts.init（のdocument.getElementById（ 'MAIN1' myChart ））;
       // チャート
      myChart.setOption（{ 
          タイトル：{ 
              テキスト：「Aソースにアクセスするには、サイトのユーザーの、//メインタイトルの
              言外の意味： "架空、//サブタイトル
              X-：'中央'、// x軸方向、整列
          } 
          ヒント：{ 
              トリガ： 'アイテム' 、
              フォーマッタ： "{A} {B}：{C}（{D}％）" 
          }、
          凡例： { 
              東洋：「の垂直方向の数」、
              下：「ボトム」、
              データ：[「直接アクセス」、「メールマーケティング」、「アフィリエイト広告」、「動画広告、 『』検索エンジン] 
          }、
          シリーズ：[ 
              { 
                  名：」 「リファラ、
                  タイプの：」PIE」、
                  半径： '55％」、
                  センター：[ '50％ ''60％' ]、
                  データ：[ 
                      {値： 335、名称： 'ダイレクトアクセス' }、
                      {値： 310、名称： '電子メールマーケティング' }、
                      {値： 234、名前： 'アフィリエイト広告' }、
                      {値： 135、名前： '動画広告' }、
                      {値： 1548、名称： '検索エンジン' } 
                  ]、
                  ItemStyle：{ 
                      強調：{ 
                          shadowBlur： 10 、
                          shadowOffsetX：0 、
                          shadowColorは： 'RGBA（0、0、0、0.5）' 
                      } 
                  } 
              } 
          ] 
      }）。
    } 
  } 
}
 </ SCRIPT>

レンダリング

VUE使用echartsは、円グラフを描きます

おすすめ