この記事では、プログレスバーヒストグラムを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?
>>: Alibaba Cloud ドメイン名と IP バインディングの手順と方法
フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...
この記事では、キャンバスを使用して画像圧縮アップロードを実現するVueの具体的なコードを参考までに共...
最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...
HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...
設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...
以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...
現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...
目次1. v-on指令1. 基本的な使い方2. 糖衣構文3. イベントパラメータ4. イベント修飾子...
1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...
この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...