序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Alibaba Cloud Server Tomcatにアクセスできません
>>: Navicatを使用してクラウドサーバーデータベースにリモート接続する方法
01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...
初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...
目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...
まず依存関係をインストールする必要があります npm i lib-flexible-computer...
ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...
Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...
1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...
以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...
目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...
目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...
この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...
nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...
過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...