Vue echarts は水平棒グラフを実現します

<テンプレート>
  <div class="OverYearsPompany">
    <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div>
  </div>
</テンプレート>
<スクリプト>
'@/api/government' から { getProposedInvestments } をインポートします。
定数色 = [
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
];
エクスポートデフォルト{
  データ（） {
    戻る {
      投資WayData: [],
      投資WayDataCount: [],
      投資WayDataCounts: [],
    };
  },
  マウント() {
    提案投資を取得します。
  },
  メソッド: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('OverYearsPompanyChart'));
      const オプション = {
        ツールチップ: {
          表示: true、
          トリガー: '軸'、
          軸ポインタ:
            タイプ: '影'、
          },
        },
        x軸:
          タイプ: '値',
          軸ラベル: {
            表示: true、
            色: '#02CFFCFF',
            フォントファミリー: 'TencentSans'、
          },
          軸線: {
            表示: true、
            線のスタイル:
              色: '#02CFFCFF',
            },
          },
          分割行: {
            表示: true、
            線のスタイル:
              色: 'rgba(71, 126, 171, 1)',
            },
          },
        },
        y軸: [
          {
            タイプ: 'カテゴリ',
            inverse: true, // 逆 axisLabel: {
              色: '#02CFFCFF',
              フォントファミリー: 'TencentSans'、
            },
            軸目盛り: {
              表示: 偽、
            },
            軸線: {
              表示: true、
              線のスタイル:
                色: '#02CFFCFF',
              },
            },
            分割行: {
              表示: true、
              線のスタイル:
                タイプ: 'ドット'、
                色: 'rgba(71, 126, 171, 1)',
              },
            },
            データ: this.investmentsWayData、
          },
        ]、
        シリーズ： [
          {
            タイプ: 'バー'、
            バー幅: 15,
            ラベル: {
              位置: ['98%', -20],
              表示: true、
              色: '#fff',
              フォントファミリー: 'TencentSans'、
            },
            データ: this.investmentsWayDataCount、
            アイテムスタイル: {
              色(パラメータ) {
                const { データインデックス } = パラメータ;
                色 = {
                  タイプ: '線形'、
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  カラーストップ: [
                    {
                      オフセット: 0,
                      色: colors[dataIndex] ? colors[dataIndex][0] : '赤',
                    },
                    {
                      オフセット: 1,
                      色: colors[dataIndex] ? colors[dataIndex][1] : '赤',
                    },
                  ]、
                };
                色を返します。
              },
            },
          },
        ]、
      };
      myChart.setOption(オプション);
    },
    提案投資を取得する() {
      getProposedInvestments().then((res) => {
        const { ステータス、データ } = res;
        const { proposalInvestmentsWayDis } = JSON.parse(データ);
        （ステータス === 200）の場合{
          // this.investmentsWayData=[{0: "合弁事業", 1: "協力", 2: "個人事業主", 3: "その他"}]
          this.investmentsWayData = proposalInvestmentsWayDis.map((item) => {
            item.wayDis を返します。
          });
          // this.investmentsWayDataCount=[{0: "496", 1: "372", 2: "248", 3: "124"}]
          this.investmentsWayDataCount = proposalInvestmentsWayDis.map((item) => {
            item.count を返します。
          });
          // this.investmentsWayDataCounts=[{itemStyle:
    //色：{
    // 0: "rgba(240, 7, 100, 1)"
    // 1: "rgba(0, 215, 229, 1)"}
    // 値: "496"}]
          this.investmentsWayDataCounts = proposalInvestmentsWayDis.map((item, index) => {
            戻る {
              値: アイテム数、
              アイテムスタイル: {
                色: 色[インデックス],
              },
            };
          });
          このメソッドは、次のとおりです。
        }
      });
    },
  },
};
</スクリプト>