この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 レギュラースタイル UIペイントスタイル効果 詳細は、小さな点の色が円グラフ部分の色と一致している必要があるということです。これは、バージョン 5.0 (echarts バージョン) より前のバージョンでこのコードを使用して実現できます。 ラベル:{ フォーマッタ: パラメータ =>{//● 戻る ( '{アイコン|▅}{名前|' +params.name+ '}{値|' + パラメータ値 + '}' ); }, リッチ: アイコン: フォントサイズ: 16 }, 名前: { フォントサイズ: 16, パディング: [0, 10, 0, 4], }, 価値: { フォントサイズ: 16, } }, } しかし、私のプロジェクトには 5.0 でのみサポートされている特殊効果がいくつかあるため、5.0 にアップグレードする必要があり、そうしないとこの色は機能しなくなります。それを実装するための解決策を見つける必要があり、これが最終的に実装された方法です。データを割り当てるときに、各ラベルの色を再割り当てし、円グラフのカラー ブロックの値を割り当てます。 構成項目: シリーズ: [ { タイプ: 'パイ'、 半径: [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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明
1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...
目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...
最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...
Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
目次1. 魔法の拡張演算子1. 配列をコピーする2. 配列を結合する3. オブジェクトを展開する2....
【序文】 Vue と React の CSS モジュール ソリューションはどちらも、実装にローダーに...
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...
この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...
目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...
序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...
目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...
最近、PHP で Web ページを書いているときに、エンコードを UTF-8 に設定しました。しかし...
この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...