Vue で棒グラフを使用し、自分で設定を変更する方法

Vue で棒グラフを使用し、自分で設定を変更する方法

1. HTMLファイルでechartをインポートする

 <!-- echarts をインポート -->
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

2. main.jsにechartsオブジェクトをマウントする

Vue.prototype.$echarts = window.echarts
// this.$echartsを直接使用して

3. ページ構造

<テンプレート>
 <div class="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</テンプレート>

4.データ内のデータ

エクスポートデフォルト{
 データ () {
  戻る {
   // 初期化されたチャート chartInstance: null,
   allDate: null, //サーバーから返されたデータ}
 },
}
```js
##### 5. メソッド内のロジック ```js
メソッド: {
  // echartsオブジェクトを初期化する initEchart(){
    // DOM オブジェクトを取得します。 this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // サーバーからデータを取得する async getData(){
    const {data:res} = これを待機します。$http.get('seller')
    this.allDate = res
    // 返されるデータ構造は、名前、商人、値です // 返されたデータを小さい順から大きい順に並べ替えます sort メソッド this.allDate.sort((a, b) => {
    a.値 - b.値を返す
   })
    // ビュー更新メソッド this.updateChart() を呼び出す
  },
  // チャートを更新する updateChart(){
  // Y軸カテゴリ軸データ const sellerNames = this.allDate.map(item=>{
    // 必要に応じて return item.name を調整します
  })
  // x軸の値軸のデータ const sellerValues ​​= this.allDate.map(item=>{
    アイテム値を返す
  })
     const オプション = {
    x軸:
     タイプ: '値'
    },
    y軸: {
     タイプ: 'カテゴリ',
     // y軸の座標軸は、トラバースされた名前を使用します
     データ:販売者名
    },
    シリーズ: [
     {
      // タイプは棒グラフタイプ: 'bar'、
      // x軸データは、トラバーサル値としてシリーズデータ型に設定する必要があります
      データ:sellerValues
     }
    ]
  }
  // オプションデータをDOMオブジェクトにレンダリングします this.chartInstance.setOption(option)
},

マウントされたフック関数呼び出し

 // DOMの読み込みが完了したら、mounted() を呼び出します。
  この.initChart()
  この.getData()
 },

縦棒グラフの設定を変更する

1. index.htmlにテーマ設定ファイルを導入する

 <!-- トピックの紹介 -->
 <script src="./static/lib/theme/chalk.js"></script>

2. 初期化を使用してDOMを取得し、テーマが必要な場所にそれを渡す

   this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')

3.オプション設定 LinearGradient(x1,x2,y1,y2) 線形グラデーション

   const オプション = {
    タイトル:
     テキスト: '| 販売業者の売上統計',
     テキストスタイル: {
      フォントサイズ: 66
     },
     残り: 20,
     トップ: 20
    },
    // 軸構成グリッド: {
     上: '20%'、
     左: '3%'、
     右: '6%'、
     下: '3%'、
     // 距離には軸テキストが含まれます containLabel: true
    },
    x軸:
     タイプ: '値'
    },
    y軸: {
     タイプ: 'カテゴリ',
     // y軸の座標軸は、トラバースされた名前を使用します
     データ:販売者名
    },
    シリーズ: [
     {
      // タイプは棒グラフタイプ: 'bar'、
      // x軸データは、トラバーサル値としてシリーズデータ型に設定する必要があります
      データ: sellerValues、
      // 列幅 barWidth: 66,
      // 列テキストはデフォルトではラベルを表示しません: {
       表示: true、
       // テキストは右の位置に表示されます: 'right'、
       テキストスタイル: {
        // 色は白です color: 'white'
       }
      },
      //列内の各項目を制御する itemStyle: {
       // barBorderRadiusの角の半径を制御します: [0, 33, 33, 0],
       // 線形グラデーション // 色の値の異なるパーセンテージを指定します color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         // 0 パーセント スタイル オフセット: 0,
         色: '#5052EE'
        },
        {
         // 100% オフセット: 1,
         色: '#AB6EE5'
        }
       ])
      }
     }
    ]、
    ツールチップ: {
     トリガー: '軸'、
     軸ポインタ:
      type: 'line', // デフォルトは直線、オプション: 'line' | 'shadow'
      z: 0, // 背景レベルのlineStyle: {
       width: 66, // 背景の幅 color: '#2D3443' // 背景色}
     }
    }
   }
   「」

以上が、Vue で棒グラフを使用する方法と、自分で設定を変更する方法の詳細です。Vue で棒グラフを使用する方法についての詳細は、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Vue Echarts はスクロール効果のある縦棒グラフを実装します
  • Vue+echarts は 3D 縦棒グラフを実現します
  • Vueはechartsに基づいて3次元の縦棒グラフを実装します
  • Vueはechartsを使用して水平方向の列グラフの例を実装します
  • D3.js+Vue を使用したシンプルな縦棒グラフの実装
  • VueはEchartsを使用して3次元棒グラフを実装します
  • Vue echarts は水平棒グラフを実現します
  • Vue echarts は棒グラフの動的な表示を実現します
  • Vue+echarts で積み上げ棒グラフを実現
  • Vueはechartsを使用して3次元の縦棒グラフを実装します

<<:  MySQL 分離レベル操作プロセスの詳細説明 (cmd)

>>:  Nexus サーバーを設定するための詳細な手順

推薦する

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

HTMLでカスタムタグを使用する方法

カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...

よく使用される MySQL 関数の完全なリスト (分類および要約)

1. 数学関数ABS(x) xの絶対値を返します。 BIN(x) xの2進値を返します(OCTは8...

MySQLを監視するためのbinlogログ解析ツールの詳しい説明:Canal

Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

Docker に influxdb をインストールするための詳細なチュートリアル (パフォーマンス テスト)

1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...

MySQLパスワードを忘れた場合のいくつかの解決策

解決策1完全にアンインストールしてすべてのデータを削除します。まず、MySQLに関連するすべてのプロ...

Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)

1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...

Vueを使い始める際に習得する必要がある知識について簡単に説明します

最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...