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 マスタースレーブレプリケーションの原理と実践の詳細な説明

推薦する

MySQL DISTINCTの基本実装原理の詳細な説明

序文DISTINCT は、GROUP BY 操作の実装と非常によく似ていますが、GROUP BY の...

MySQL 8.0 DDLアトミック機能と実装原則

1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...

geoip を使用して nginx で地域を制限する方法

このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...

CentOS7にJDK8をrpmモードでインストールする

CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

vue-cli の紹介とインストール

目次1. はじめに2. vue-cli の紹介2.1 コマンドライン2.2 CLI サービス2.3 ...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...