VueはEChartsを使用して折れ線グラフと円グラフを実装します

npm インストール echarts --save
 
'echarts' から * を echarts としてインポートします。

<テンプレート>
    <div id="chartPie" class="pie-wrap"></div>
</テンプレート>
 
<スクリプト>
    'echarts' から * を echarts としてインポートします。
    require('echarts/theme/macarons');//テーマを導入する export default {
    データ（） {
      戻る {
        チャート円: null
      }
    },
    マウント() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    メソッド: {
      円グラフを描く() {
        mytextStyle = {とする
          色: "#333",                          
          フォントサイズ: 18,                            
        };
        mylabel = {
          表示: true、                 
          位置: "右",          
          オフセット: [30, 40],             
          フォーマッタ: '{b} : {c} ({d}%)',      
          テキストスタイル: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'マカロン');
        this.chartPie.setOption({
          タイトル：
            テキスト: '円グラフ'、
            サブテキスト: 「完全に架空のもの」
            x: '中心'
          },
          ツールチップ: {
            トリガー: 'アイテム',
            フォーマッタ: "{a} <br/>{b} : {c} ({d}%)",
          },
          伝説： {
            データ: ['ダイレクトアクセス'、'メールマーケティング'、'アフィリエイト広告'、'ビデオ広告'、'検索エンジン']、
            左:「中央」、                              
            上:"下",                              
            方向:"水平",                        
          },
          シリーズ： [
            {
              名前: 'アクセスソース'、
              タイプ: 'パイ'、
              半径: ['50%', '70%'],
              中央: ['50%', '50%'],
              データ： [
                {値: 335、名前: '直接アクセス'},
                {値: 310、名前: 'メールマーケティング'},
                {値: 234、名前: 'Alliance Advertising'},
                {値: 135、名前: 'ビデオ広告'},
                {値: 1548、名前: '検索エンジン'}
              ]、
              アニメーションイージング: 'cubicInOut',
              アニメーション時間: 2600,
              ラベル: {           
                強調: mylabel
              }
            }
          ]
        });
      }
    }
  }
</スクリプト>
 
<style lang='less' スコープ>
    .pie-wrap{
        幅:100%;
        高さ:400px;
    }
</スタイル> 

<テンプレート>
    <!-- ECharts のサイズ (幅と高さ) を持つ DOM を準備します -->
    <div id="chartLine" class="line-wrap"></div>
</テンプレート>
 
<スクリプト>
    'echarts' から * を echarts としてインポートします。
    require('echarts/theme/shine');//テーマを導入する export default {
    データ（） {
      戻る {
        チャートライン: null
      }
    },
    マウント() {
      this.$nextTick(() => {
        線グラフを描画します。
      })
    },
    メソッド: {
      線グラフを描く() {
        this.chartLine = echarts.init(this.$el,'shine');// 準備された dom に基づいて echarts インスタンスを初期化します。let option = {
            ツールチップ: {
                トリガー: '軸'
            },
            伝説： {
                データ:['メールマーケティング'、'アフィリエイト広告'、'ビデオ広告'、'ダイレクトアクセス'、'検索エンジン']
            },
            計算可能: 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]
                }
            ]
        };
        // 指定した設定項目とデータを使用してグラフを表示します。this.chartLine.setOption(option);
      }
    }
  }
</スクリプト>
 
<style lang='less' スコープ>
    .行折り返し{
        幅:50%;
        高さ:400px;
    }
</スタイル> 

タイトル：
    text: '円グラフ', // メインタイトルテキスト subtext: '完全に架空のもの', // サブタイトルテキスト x: 'center',
    textStyle:{//メインタイトルのスタイルカラー: "#333",                          
      フォントサイズ: 18
    },
    subtextStyle:{}, // 字幕スタイル itemGap: 10, // メインと字幕の間隔}

伝説： {
    left:"center", //凡例コンポーネントとコンテナの左側の間の距離 top:"bottom", //凡例コンポーネントとコンテナの上部の間の距離 orient:"horizo​​ntal", //凡例リストのレイアウト方向 itemGap :20, //各凡例項目間の間隔 formatter: function (name) { //凡例テキストのフォーマットに使用され、文字列テンプレートとコールバック関数の両方をサポートします~~~~
        '凡例' + 名前を返します。
    },
    icon:'circle', //凡例項目のアイコン
    データ： [
        {
            アイコン: '三角形'、
            テキストスタイル: {
              色: 「赤」
            },
            名前: 「直接アクセス」 
        },
        ['E メール マーケティング'、'アフィリエイト広告'、'ビデオ広告'、'検索エンジン']、//凡例のデータ配列}

x軸: [
        {
            type : 'category', // 軸タイプ boundaryGap : false,
            axisTick:{//軸スケール関連の設定を表示: false
            },
            data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] // カテゴリデータ}
    ]

y軸: [
        {
            type : 'value', // 軸タイプ、`'value'` 数値軸、連続データに適しています axisTick: {
                表示:偽
            },
            名前: '(人)'
        }
    ]

ツールチップ: {
    トリガー: 'axis'、//トリガー タイプ、'axis' 軸トリガー、主に棒グラフ、折れ線グラフ、カテゴリ軸を使用するその他のグラフで使用されます。フォーマッタ: "{a} <br/>{b} : {c} ({d}%)"、//テンプレート変数には、それぞれシリーズ名、データ名、データ値などを表す `{a}`、`{b}`、`{c}`、`{d}`、`{e}` が含まれます。}

A. シリーズライン
 
シリーズ： [
    {
        名前:「電子メールマーケティング」、
        タイプ:'line'、
        スタック: '合計金額'、
        data:[120, 132, 101, 134, 90, 230, 210], //シリーズ内のデータコンテンツ配列 areaStyle:{ //エリア塗りつぶしスタイル color:'red'
        },
        lineStyle:{//線のスタイルの色:'#000'
        },
        強調:{//グラフィックハイライトスタイルラベル:{
                色: '赤'
            }
        }
    }
]
 
B. シリーズパイ
シリーズ： [
    {
      名前: 'アクセスソース'、
      タイプ: 'パイ'、
      radius: ['50%', '70%'], //円グラフの半径。配列の最初の項目は内側の半径、2 番目の項目は外側の半径です。center: ['50%', '50%'], //円グラフの中心 (センター) 座標。配列の最初の項目は水平座標、2 番目の項目は垂直座標です。パーセンテージで設定できます。パーセンテージで設定する場合、最初の項目はコンテナの幅に相対し、2 番目の項目はコンテナの高さに相対します。roseType: false, //ナイチンゲール チャートとして表示するかどうか、半径でデータ サイズを区別します。data: [ //シリーズ内のデータ コンテンツ配列 {value: 335, name: 'Direct access'},
        {値: 310、名前: 'メールマーケティング'},
        {値: 234、名前: 'Alliance Advertising'},
        {値: 135、名前: 'ビデオ広告'},
        {値: 1548、名前: '検索エンジン'}
      ]、
      animationEasing: 'cubicInOut', //初期アニメーションのイージング効果 animationDuration: 2600, //初期アニメーションの継続時間 label: {           
        強調: mylabel//強調表示されたセクターとラベルのスタイル}
    }

]