vue+echartsチャートの使用に関する問題記録

vue+echartsチャートの使用に関する問題記録

序文

echarts は私が最もよく使用するチャート作成ツールであり、非常に完全なエコシステムとコンテンツを備えているため、日常的な使用には十分です。最近、ビッグデータ プラットフォーム ページに取り組んでいて、多くのグラフを使用する必要があったため、echarts を使用しました。使用中に、難しい問題や設定マニュアルの奥深くに隠された特性にも遭遇しました。今日はそれらを記録します。

使い方

1. チャートのグリッドをキャンセルし、グリッドの色を変更する

// グリッド線を表示するかどうかを制御します splitLine: {
    show: false, //グリッド線を表示するかどうか//スタイルを変更する lineStyle: {
       color: '#ccc' // グリッド線の色を変更する}                            
},

2. 座標軸のスタイルを変更する

x軸: [
              {
                  タイプ: 'カテゴリ',
                  境界ギャップ: false、
                  データ: ['1月'、'2月'、'3月'、'4月'、'5月'、'6月']、
                  軸線:{
                      線のスタイル:{色:"#ccc"}
                  },
                  軸目盛り: {
                    show: false // スケールを削除する},
                  axisLabel:{//フォント スタイルの変更show: true,//表示と非表示textStyle:{color:"#ccc"}
                  },
                  // グリッド線を表示するかどうかを制御します splitLine: {
                 show: false, //グリッド線を表示するかどうか//スタイルを変更する lineStyle: {
                     color: '#ccc' // グリッド線の色を変更する}                            
},
              }
          ]、
          y軸: [
              {
                  タイプ: '値',
                  名前: '(回)',
                  軸線:{
                      線のスタイル:{色:"#ccc",フォントサイズ:'16'}
                  },
                  軸目盛り: {
                    show: false // スケールを削除する},
              }
          ]、

3. ドーナツグラフのスタイルの変更または構成

//円のタイトルの中央のテキストのスタイルを変更します: {
          テキスト: value.value+'times',
          サブテキスト: 値.名前、
          x: '中心'、
          y: '中心'、
          アイテムギャップ: 0,
          テキストスタイル: {
            フォントサイズ: 26,
            フォントの太さ: '太字'、
            色: 'rgb(0,237,255)'
          },
          サブテキストスタイル: {
            フォントサイズ: 16,
            フォントの太さ: '太字'、
            色: '#fff'
          },
},
//マウスが連続して動くときに円のフローティング効果をクリアします: [
            {
              hoverAnimation:false, //この属性を追加します}
    ]

4. 複数のチャートを切り替え、最後に読み込んだデータをクリアする

setOptionにtrueを追加する

オプション && myChart.setOption(option,true);

5. グラフでのグラデーションカラーの使用

echarts.graphic.線形グラデーション

シリーズ: [
          {
            タイプ: 'パイ'、
            中央: ['50%', '49%'],
            半径: ['45%', '73%'],
            // 最小角度: 0,
            startAngle: 0, // グラデーション角度 AvoidLabelOverlap: true, // ラベルの重なりを防ぐかどうか emphasis: {
              ラベル: {
                表示: true、
                位置: '中央'
              }
            },
            データ: seriesData、
            アイテムスタイル: {
              強調:
                影ぼかし: 10,
                シャドウオフセットX: 0,
                影の色: 'rgba(0, 0, 0, 0.5)',
                ラベル: {
                  表示: true、
                }
              },
              普通: {
                color: function (params) { //カラーグラデーション var colorList = [
                    {
                      c1: '#3288FC',
                      c2: '#36B4FD'
                    },
                    {
                      c1: '#CBA0FF',
                      c2: '#598EFE'
                    },
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //カラーグラデーション関数の最初の4つのパラメータは、それぞれ左、下、右、上の4つの位置を表します。オフセット: 0,
                    色: colorList[params.dataIndex].c1
                  }, {
                    オフセット: 1,
                    色: colorList[params.dataIndex].c2
                  }])

                }
              }
            }
          }
        ]

要約する

vue+echarts チャートの使用に関するこの記事はこれで終わりです。vue+echarts チャートの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue に Echarts チャートを追加するための基本的なチュートリアル
  • Vue+echartsは、動的にチャートを描画し、非同期にデータをロードする方法を実現します。
  • Vue.js+Echarts 開発チャートのズームインとズームアウト機能の例
  • Vue で複数の同一の echarts チャートのループ レンダリングを実装する
  • Vue で echarts チャートを使用する詳細な方法
  • Vue での echarts チャートのサンプルコードの使用に関する詳細な説明
  • Vue2はEchartsを使用してチャートのサンプルコードを作成します
  • Vue で echarts チャート適応を使用するためのいくつかのソリューション
  • Vue の echarts チャートのサイズがウィンドウのサイズに適応し、更新する必要がないケース

<<:  Alibaba Cloud Server Tomcatにアクセスできません

>>:  Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

推薦する

MySQL 並列レプリケーションの簡単な分析

01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...

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

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

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

Vue3.0 異なる解像度のコンピュータの適応操作

まず依存関係をインストールする必要があります npm i lib-flexible-computer...

怖いハロウィーン Linux コマンド

ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...

CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...

Nginx サービス クイック スタート チュートリアル

目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...

MAC で MySQL のデフォルトの文字セットを utf8 に変更する方法

1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

要素シャトルフレームのパフォーマンス最適化の実装

目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...

フロントエンドJavaScriptの動作原理

目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...

MySQL 8.0.20 のインストールと設定の詳細なチュートリアル

この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...

nginx で複数の仮想ホストを設定する方法の例

nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...

Alibaba Cloud Server Ubuntu 上の Workbench が MySQL に接続できない問題の解決策 (テスト済み)

過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...