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 をよろしくお願いいたします。

以下もご興味があるかもしれません: