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

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

この記事では、プログレスバーヒストグラムを実現するための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;
}
</スタイル>

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

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

<<:  MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

>>:  Alibaba Cloud ドメイン名と IP バインディングの手順と方法

推薦する

Vueはユーザーログインとトークン検証を実装します

フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...

Vueはキャンバスを使用して画像圧縮アップロードを実現します

この記事では、キャンバスを使用して画像圧縮アップロードを実現するVueの具体的なコードを参考までに共...

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...

クロスオリジン画像リソース権限(CORS 対応画像)

HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

Centos7.3 Nginx をインストールして展開し、https を設定する方法

設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...

CSS--overflow:hidden のプロジェクト例

以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

MySQLデータベースの増分バックアップのアイデアと方法

MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Vue はタブ ラベルを実装します (ラベルが自動スクロールを超える)

作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...

Vue の基本的な手順の例のグラフィック説明

目次1. v-on指令1. 基本的な使い方2. 糖衣構文3. イベントパラメータ4. イベント修飾子...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...