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 を応援していただければ幸いです。

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