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のインデックス

序文早速本題に入りましょう。これからお話しするのは次のマインドマップです。まずは印象をつかんでくださ...

最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

Centos7 に mysql 8.0.13 (rpm) をインストールする詳細なチュートリアル

yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

よく使われるCSSスタイル(レイアウト)の詳しい説明

新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...

Nginx 仮想ホストを構成する 3 つの方法 (ドメイン名に基づく)

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

Idea で Tomcat のソースコードデバッグを開始し、デバッグのために Tomcat に入る方法

idea 開発ツールを使用してコードをデバッグする場合、Java Web プロジェクトで、Web コ...

MySQL は、元のデータと同じデータがある場合、更新ステートメントを再度実行しますか?

背景この記事では主に、MySQL が更新ステートメントを実行するときに、元のデータと同一の (つまり...

Centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar の簡単な分析

Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...