Vue echarts は棒グラフの動的な表示を実現します

<テンプレート>
  <div class="dan">
    <div id="scalesize" :style="{幅: '100%', 高さ: '100%'}"></div>
  </div>
</テンプレート>
<スクリプト>
「echarts」からechartsをインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      テキスト: 111
    };
  },
  マウント() {
    この.drawLine();
  },
  メソッド: {
    描画線() {
      // 準備された dom に基づいて echarts インスタンスを初期化します。let myChart = this.$echarts.init(document.getElementById("scalesize"));
      var ファンファ = [
        {
          名前:「苗木基地」、
          タイプ: "バー",
          バー幅: "15%",
          アイテムスタイル: {
            普通： {
              色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  オフセット: 0,
                  色: "#fccb05"
                },
                {
                  オフセット: 1,
                  色: "#f5804d"
                }
              ]）、
              バー境界半径: 12
            }
          },
          データ: [100, 120, 160, 180, 220, 400]
        },
        {
          名前:「植栽ベース」
          タイプ: "バー",
          バー幅: "15%",
          アイテムスタイル: {
            普通： {
              色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  オフセット: 0,
                  色: "#8bd46e"
                },
                {
                  オフセット: 1,
                  色: "#09bcb7"
                }
              ]）、
              バー境界半径: 11
            }
          },
          データ: [270, 320, 420, 650, 821,907]
        },
        {
          名前:「ホストエリア」
          タイプ: "バー",
          バー幅: "15%",
          アイテムスタイル: {
            普通： {
              色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  オフセット: 0,
                  色: "#248ff7"
                },
                {
                  オフセット: 1,
                  色: "#6851f1"
                }
              ]）、
              バー境界半径: 11
            }
          },
          データ: [140, 180, 215, 320, 396, 520]
        },
        {
          名称：「共同建設基地」
          タイプ: "バー",
          バー幅: "15%",
          アイテムスタイル: {
            普通： {
              色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  オフセット: 0,
                  色: "#B88080"
                },
                {
                  オフセット: 1,
                  色: "#983A3A"
                }
              ]）、
              バー境界半径: 11
            }
          },
          データ: [140, 180, 215, 320, 396, 420]
        }
      ];
      myChart.setOption({
        ツールチップ: {
          トリガー: "軸",
          軸ポインタ:
            // 軸インジケーター、軸トリガー有効なタイプ: "shadow" // デフォルトは直線、オプション: 'line' | 'shadow'
          }
        },
        グリッド: {
          左:「2%」、
          右：「4%」、
          下:「14%」、
          上:「16%」、
          ラベルを含む: true
        },
        伝説： {
          データ: [「苗木基地」、「植栽基地」、「信託地」、「共同建設基地」]、
          右: 10,
          トップ: 12,
          テキストスタイル: {
            色: "#fff"
          },
          アイテム幅: 12,
          アイテムの高さ: 10
          //アイテムギャップ: 35
        },
        x軸:
          タイプ:「カテゴリー」、
          データ： [
            「2014」、
            「2015」、
            「2016」、
            「2017」、
            「2018」、
            「2019」
          ]、
          軸線: {
            線のスタイル:
              色: 「白」
            }
          },
          軸ラベル: {
            // 間隔: 0,
            // 回転: 40,
            テキストスタイル: {
              フォントファミリー: "Microsoft YaHei"
            }
          }
        },
        y軸: {
          タイプ: "値",
          軸線: {
            表示: 偽、
            線のスタイル:
              色: 「白」
            }
          },
          分割行: {
            表示: true、
            線のスタイル:
              色: "rgba(255,255,255,0.3)"
            }
          },
          軸ラベル: {}
        },
        データズーム: [
          {
            表示: true、
            高さ: 12,
            x軸インデックス: [0],
            下:「8%」、
            ハンドルアイコン:
              "パス://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            ハンドルサイズ: "110%",
            ハンドルスタイル: {
              色: "#d3dee5"
            },
            テキストスタイル: {
              色: "#fff"
            },
            境界線の色: "#90979c"
          },
          {
            タイプ: "inside",
            表示: true、
            高さ: 15,
            開始: 1,
            終了: 35
          }
        ]、
        シリーズ: ファンファ
      });
      アプリを{
        現在のインデックス: -1
      };
      setInterval(関数() {
        dataLen = fanfa[1].data.lengthとします。
        // 以前に強調表示されたグラフをキャンセルします myChart.dispatchAction({
          タイプ:「軽視」、
          シリーズインデックス: 0,
          データインデックス: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % データ長;
        //コンソールログ(app.currentIndex);
        //現在のグラフを強調表示myChart.dispatchAction({
          タイプ: "ハイライト"、
          シリーズインデックス: 0,
          データインデックス: app.currentIndex
        });
        // ツールチップを表示
        myChart.dispatchAction({
          タイプ: "showTip",
          シリーズインデックス: 0,
          データインデックス: app.currentIndex
        });
      }, 1000);
      ウィンドウのサイズ変更
    }
  }
};
</スクリプト>
<style lang="less" スコープ>
.ダン {
  高さ: 90%;
}
</スタイル>