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

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

この記事では、水平棒グラフを実現するための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) => {
            戻る {
              値: アイテム数、
              アイテムスタイル: {
                色: 色[インデックス],
              },
            };
          });
          このメソッドは、次のとおりです。
        }
      });
    },
  },
};
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+Echartは3次元の縦棒グラフを実現します
  • VueはEchartアイコンプラグインの棒グラフを使用します
  • Echarts を使用して棒グラフを描く vue の詳細な説明
  • Vue+Echart 棒グラフで疫病データ統計を実現
  • Vue+echart で 2 列チャートを実現
  • Vueは水平の斜めの棒グラフを実装します
  • Vue+echarts で積み上げ棒グラフを実現
  • Vue+echarts でプログレスバーのヒストグラムを実現
  • VueはEchartsを使用して3次元棒グラフを実装します
  • Vue+ Antv F2 は積み上げ棒グラフを実現します

<<:  sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する

>>:  Alibaba Cloud ECSインスタンスのユーザールートパスワードとリモート接続方法を設定する方法

推薦する

MySQL 8.0.22 zip圧縮パッケージ版(無料インストール)のダウンロード、インストール、および構成手順の詳細

目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

HTML チュートリアル、簡単に学べる HTML 言語 (2)

*******************HTML言語入門(パート2)*****************...

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

Vue フォーム入力バインディング v-model

目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...

CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...

nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法

目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...

大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...

Linux仮想マシンをWiFiに接続する方法

生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...