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

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

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

レギュラースタイル


UIペイントスタイル効果


詳細は、小さな点の色が円グラフ部分の色と一致している必要があるということです。これは、バージョン 5.0 (echarts バージョン) より前のバージョンでこのコードを使用して実現できます。

ラベル:{
 フォーマッタ: パラメータ =>{//●
       戻る (
               '{アイコン|▅}{名前|' +params.name+ '}{値|' +
               パラメータ値 + '}'
           );
       },
       リッチ:
           アイコン:
               フォントサイズ: 16
           },
           名前: {
               フォントサイズ: 16,
               パディング: [0, 10, 0, 4],
           },
           価値: {
               フォントサイズ: 16,
           }
       },
}

しかし、私のプロジェクトには 5.0 でのみサポートされている特殊効果がいくつかあるため、5.0 にアップグレードする必要があり、そうしないとこの色は機能しなくなります。それを実装するための解決策を見つける必要があり、これが最終的に実装された方法です。データを割り当てるときに、各ラベルの色を再割り当てし、円グラフのカラー ブロックの値を割り当てます。
円グラフ内のパーセンテージが重ね合わされており、バスケットで囲まれているため、ここには 2 セットのデータがあります。

構成項目:

シリーズ: [
    {
      タイプ: 'パイ'、
      半径: [0, '75%'],
      中央: ['50%', '50%'],
      上:0,
      // ローズタイプ: '半径',
      ラベルの重複を避ける: true,
      // 最小表示ラベル角度: 0.6,
      開始角度: 0,
      ラベル: {
        表示:true、
        位置: '外側'、
        alignTo: 'エッジ'、
        //別の解法点法線: {
          フォーマッタ: パラメータ => {
            // フォーマットカラー(params.color)
            // 色 = params.color
              戻る (
                  '{アイコン|● }{名前|' + パラメータ名 + '}'+'\n'+'{値|' +
                  パラメータ値+'times' + '}'
              );
          },
          パディング:[0,-40,25,-40],
          リッチ:
              アイコン:
                フォントサイズ: 15,
              },
              名前: {
                フォントサイズ: 13,
                色: '#666666'
              },
              価値: {
                フォントサイズ: 12,
                色: 'rgba(0,0,0,0.35)'
              }
          }
        }
      },
      ラベル行:{
        長さ:10,
        長さ2:70,
        スムーズ: 偽、
        線のスタイル:{
          色:"rgba(0,0,0,0.15)"
        }
      },
      データ: []
    },
    {
      名前: ''、
      タイプ: 'パイ'、
      半径: [0, '75%'],
      中央: ['50%', '50%'],
      データ:[]、
      上:0,
      // ローズタイプ: '半径',
      ラベルの重複を避ける: true,
      開始角度: 0,
      アイテムスタイル: {
          普通: {
              ラベル: {
                  表示: true、
                  位置: '内側'、
                  色:"#fff",
                  フォントサイズ: 14,
                  配置:"中央",
                  formatter: function (p) { //インジケーター行はテキスト、パーセンテージに対応します。 return p.percent + "%";
                  }
              },
          }
      }
    }
  ]

再割り当て:

//カラーカードを取得して再割り当てする let colorArr = pieOption.color

 seriesData = JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows)) とします||[]
      seriesData1 を JSON.parse(JSON.stringify(this.orderServiceTimeLenData.output.value.rows)) とします||[]
      if(シリーズデータ.長さ){
        seriesData.forEach((item,index)=>{
          アイテム名 = アイテムタイプStr
          アイテム値 = アイテム番号
          item.label = {color:colorArr[インデックス]}
        })
        seriesData1.forEach((item,index)=>{
          アイテム名 = アイテムタイプStr
          アイテム値 = アイテム番号
        })
      }
{凡例: {data: seriesData}、シリーズ: [{data: seriesData}、{data: seriesData1}]} を返します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue カスタムタグと単一ページの複数ルーティング実装コード
  • Vue の el-form ラベルのカスタム el-select ドロップダウン ボックス ラベル機能
  • Vueカスタムタグのsrc属性では相対パスを使用できません
  • Vue2.0で実装したタブ切り替え効果の例(内容はカスタマイズ可能)
  • Vue-basicタグとカスタムコントロールの詳細な説明

<<:  Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明

>>:  MySQL でのトランザクションの使用方法

推薦する

HTMLの基本タグと構造の詳細な説明

1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

Ubuntu Linux に Git と GitHub をインストールして使用する

Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...

JavaScript を学ぶときに知っておくべき 3 つのヒント

目次1. 魔法の拡張演算子1. 配列をコピーする2. 配列を結合する3. オブジェクトを展開する2....

css-loader を使用して vue-cli で css モジュールを実装する

【序文】 Vue と React の CSS モジュール ソリューションはどちらも、実装にローダーに...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

Vue+el-tableはセルの結合を実現します

この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...

JavaScript の手ぶれ補正とスロットリングの詳細な説明

目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...

MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法

序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...

Reactの原理の説明

目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...

エンコードが utf-8 に設定されている場合に Web ページが文字化けする問題の解決策

最近、PHP で Web ページを書いているときに、エンコードを UTF-8 に設定しました。しかし...

Vue+Element UIはドロップダウンメニューのカプセル化を実現します

この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...