Vue+echarts でプログレスバーのヒストグラムを実現

<テンプレート>
  <div class="content-page">
    <div class="タブコンテンツ">
      <div id="myChart1"></div>
    </div>
  </div>
</テンプレート>

<スクリプト>
'echarts' から * を echarts としてインポートします。
エクスポートデフォルト{
    データ（） {
      戻る {
        オプション： {
          color: ["#157ef5"], // 棒グラフの色を設定します textStyle: {
            色: "#828282"
          },
          ツールチップ: {
            トリガー: "軸",
            軸ポインタ:
              タイプ: "line"
            }
          },
          グリッド: {
            左:「3%」、
            右：「4%」、
            下部:「3%」、
            ラベルを含む: true
          },
          x軸:
            タイプ: "値",
            // x軸を複数のセグメントを表示するように設定します min: 0,
            最大: 100,
            間隔: 50,
            axisTick: { 表示: false },
            軸線: {
              線のスタイル:
                色: 「透明」
              }
            }
          },
          y軸: {
            タイプ:「カテゴリー」、
            データ: ["財務収益", "本社経済"],
            axisTick: { 表示: false },
            軸線: {
              線のスタイル:
                色: "#e0e0e0"
              }
            },
            内部: 真、
            テキストスタイル: {
              色: "#000"
            }
          },
          シリーズ： [
            {
              タイプ: "バー",
              アイテムスタイル: {
                  color: "#f1f1f1", // 列の背景色を定義します borderRadius: [0, 10, 10, 0] // 背景列の丸い角を定義します},
              barGap: "-100%", //列の重複データを設定する重要な手順: [100, 100],
              animation: false, // アニメーション効果をオフにする barWidth: "22px", // 列の幅を設定する},
            {
              タイプ: "バー",
              データ: [65, 75],
              バー幅: "22px",
              barGap: "-100%", //列の重なりを設定するための重要な手順 itemStyle: {
                  borderRadius:[0, 10, 10, 0], // 列の角丸の色を定義します: function(params) {
                      var colorList = ['#3C90EB', '#B573F4', '#F9B341', '#F9B341', '#91c7ae'];
                      colorList[params.dataIndex]を返す
                  }
              },
            }
          ]
        }
      }
    },
    マウント() {
      チャートデータを取得します。
    },
    メソッド: {
      チャートデータを取得する() {
        myChart1 を echarts.init(document.querySelector("#myChart1")) とします。
        myChart1.setOption(this.option); // チャートの初期化データを設定する setTimeout(function() {
          window.onresize = 関数() {
            myChart1.resize(); // チャートはウィンドウのサイズに合わせて調整されます};
        }, 200);
      }
    }
}
</スクリプト>

<style lang="less" スコープ>
#myChart1 {
  幅: 600ピクセル;
  高さ: 400px;
}
</スタイル>