vue3.0+echarts は 3 次元の縦棒グラフを実現します

vue3.0+echarts は 3 次元の縦棒グラフを実現します

序文:

Vue3.0はechartsの3次元縦棒グラフを実装します

結果:

実装手順:

1. echartsをインストールする

cnpm i --save echarts

2. ページ定義コンテナ

<テンプレート>
  <div ref="echart" class="echartDiv"></div>
</テンプレート>

3. JS に echarts を導入する

'echarts' から * を echarts としてインポートします。

コンポーネントの完全なソースコード:

<テンプレート>
  <div ref="echart" class="echartDiv"></div>
</テンプレート>
 
<スクリプト>
'echarts' から * を echarts としてインポートします。
'vue' から { onMounted、toRefs、ref、reactive } をインポートします。
エクスポートデフォルト{
  設定(){
    状態をreactive({
      xAxisData:['Haoxing', 'Yanzi', 'ドラえもん', 'Li Qiang', 'Wang Ying', 'Lao Wang'],
      y軸データ:[4,22,1,11,23,11],
      y軸データ1:[1,1,1,1,1,1],
      echart: ref(),
    })
    定数echartInit = () => {
      var myChart = echarts.init(state.echart);
      //チャートの設定項目とデータを指定する var option = {
        ツールチップ: {
          トリガー: "軸",
          軸ポインタ:
            type: "shadow", // デフォルトは直線、オプション: 'line' | 'shadow'
          },
          フォーマッタ: function(parms) {
            var str =
              パラメータ[0].軸値 +
              "</br>" +
              パラメータ[0].マーカー +
              「今日ログイン:」+
              parms[0].value + 'times'
            str を返します。
          },
 
        },
        テキストスタイル: {
          色: "#333",
        },
        色: ["#7BA9FA", "#4690FA"],
        グリッド: {
          ラベルを含む: true、
          左:「10%」、
          上:「20%」、
          下部:「10%」、
          右:「10%」、
        },
        x軸:
          タイプ:「カテゴリー」、
          データ: state.xAxisData、
          軸線: {
            線のスタイル:
              色: "#333",
            },
          },
          軸目盛り: {
            表示: 偽、
          },
          軸ラベル: {
            margin: 20, //スケールラベルと軸線の間の距離。
            テキストスタイル: {
              色: "#000",
            },
          },
        },
        y軸: {
          タイプ: "値",
          軸線: {
            表示: true、
            線のスタイル:
              色: "#B5B5B5",
            },
          },
          分割行: {
            線のスタイル:
              // 明るい色と暗い色の間隔を使用します color: ["#B5B5B5"],
              タイプ:「破線」、
              不透明度: 0.5、
            },
          },
          軸ラベル: {},
        },
        シリーズ: [{
          データ: state.yAxisData、
          スタック: "zs",
          タイプ: "バー",
          バー最大幅: "自動",
          バー幅: 60,
          アイテムスタイル: {
            色:
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              タイプ: "線形"、
              グローバル: false、
              カラーストップ: [{
                オフセット: 0,
                色: "#5EA1FF",
              },
                {
                  オフセット: 1,
                  色: "#90BEFF",
                },
              ]、
            },
          },
        },
 
          //次の3次元制御色は最初の色です{
            データ: state.yAxisData1、
            タイプ: "pictorialBar",
            バー最大幅: "20",
            シンボル:「ダイヤモンド」、
            シンボルオフセット: [0, "50%"],
            シンボルサイズ: [60, 15],
            zレベル: 2,
          },
          //上記の3次元では、制御色は2番目の色です{
            データ: state.yAxisData、
            タイプ: "pictorialBar",
            バー最大幅: "20",
            シンボル位置: "end",
            シンボル:「ダイヤモンド」、
            シンボルオフセット: [0, "-50%"],
            シンボルサイズ: [60, 12],
            zレベル: 2,
          }
        ]、
      };
      // 指定した構成項目とデータを使用してグラフを表示します。
      myChart.setOption(オプション);
    }
 
    //マウントonMounted(()=>{
      echartInit()
    })
 
    戻る {
      ...toRefs(状態)、
      echartInit
    };
  }
}
</スクリプト>
 
<style lang='scss' スコープ>
  .echartDiv{
    幅: 100%;
    高さ: 400px;
  }
</スタイル>

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

以下もご興味があるかもしれません:
  • Vue+echarts は 3D 縦棒グラフを実現します
  • Vue+Echartsは列線グラフを実装します
  • Vue+echarts はストライプ状の縦棒グラフを実現します
  • Echarts を使用して棒グラフを描く vue の詳細な説明
  • Vue echarts は水平棒グラフを実現します
  • Vue echarts は棒グラフの動的な表示を実現します
  • Vue+echarts で積み上げ棒グラフを実現
  • Vue+echarts でプログレスバーのヒストグラムを実現
  • Vueはechartsに基づいて3次元の縦棒グラフを実装します
  • Vue Echarts はスクロール効果のある縦棒グラフを実装します

<<:  サーバー上で Nginx を使用して Springboot プロジェクトをデプロイする方法の詳細なチュートリアル (jar パッケージ)

>>:  MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

推薦する

フロントエンドの面接の質問の最も包括的なコレクション

HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...

sed コマンドを使用して文字列を置換する Linux チュートリアル

文字列を置き換えるには、次の形式を使用する必要があります。 $ sed s/置換対象文字列/置換文字...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

mysql 更新ケース更新フィールド値が固定されていない操作

特定のデータの一括更新処理において、特定のステータスが固定値に更新されるなど、更新するフィールドの値...

Oracle と MySQL の高可用性ソリューションの比較分析

Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...

MySQL カーディナリティ統計の簡単な分析

1. カーディナリティとは何ですか?カーディナリティとは、MySQL テーブルの列内の異なる値の数を...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

MySQL 5.7.17 最新インストールチュートリアル(画像とテキスト付き)

mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...

Linux でファイアウォールがオフになっているかどうかを確認する方法

1. サービス方法ファイアウォールのステータスを確認します。 [root@centos6 ~]# サ...

Mysql 5.7.19 無料インストール版 (64 ビット) の設定方法に関する詳細なチュートリアル

公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...

Vue でのキープアライブコンポーネントの使用例

問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...

docker redis5.0 clusterの実装 クラスタ構築

システム環境: Ubuntu 16.04LTSこの記事では、6 つの Docker コンテナを使用し...