--- VUEデータテーブル、カラム、ラインスイッチ（echartsが導入および使用）

       フロントエンド開発において、データページは、データの形式は、形式と異なるグラフィックの多様性に表示させることができる表示するように開発されなければならないことを示しています。さて、今日はechartsは、プロジェクト、画像表示データの実現に導入VUE方法について学習します。

ページの開発を披露するために、

                                                                   これは、に切り替えることができ、テーブル、列、行表示

製造工程

eachatsをインストール1.

npm install echarts --save

2.導入グローバルまたはローカルに組み込まecharts

グローバル導入：[ファイル]で導入main.js。短所：グローバル・パッケージの導入は、大きすぎで、すべてのechartsチャート結果だろう。

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

ローカル導入：あなたが使用したいページの導入を、

import echarts from "echarts";

3.描画準備と描画

3.1 DOM書き込まれたデータの表示領域は次の通り：

  

注：列と行グラフ領域は、スタイルの幅の高さを追加してください、それ以外の場合は、グラフィックスが表示されます。

3.2基づいて作成DOM、初期化echarts例、[VAR myChart = echarts.init（のdocument.getElementById（ "ヒストグラム"））;]

[構成およびmyChart.setOption（オプション）]設定データに

図差の列と行：次のコードを[]シリーズで、それぞれ[タイプ：「バー」]、[タイプ：「行」]

  //绘制柱形图
    drawHistogram() {
      var myChart = echarts.init(document.getElementById("histogram"));
      // 准备配置
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "必应",
            "其他"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "广告",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed"
                }
              },
              data: [[{ type: "min" }, { type: "max" }]]
            }
          },
          {
            name: "百度",
            type: "bar",
            barWidth: 5,
            stack: "搜索引擎",
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: "谷歌",
            type: "bar",
            stack: "搜索引擎",
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: "必应",
            type: "bar",
            stack: "搜索引擎",
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: "其他",
            type: "bar",
            stack: "搜索引擎",
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      };
      // 使用这个配置
      myChart.setOption(option);
    },

注：ページにグラフィックスを表示する表示されたときにグラフィックスをレンダリングするための上記方法は、マウント[（）]フック関数、すなわちに書き込まれます。実際の開発、背景グラフィックスデータ収集から始まり、その後、描画メソッドを呼び出します。

描画方法をパッケージ化することができる、着信直列[]と[ID]