echartでカスタム凡例を設定する方法

背景説明：echartでチャートを描くとき、​​顧客のニーズに応じていくつかの特殊効果の凡例が作成されます。

解決策：echartのリッチテキストスタイルのリッチ属性を使用していくつかの効果をカスタマイズしてから、フォーマットテキスト属性フォーマッターを使用していくつかのカスタマイズされた効果を返します。

コードは次のとおりです。

var rich = {                 yellow：{                     color： "＃FFEF3B"、                     fontSize：25、                     padding：[                 1.5、0 ]、                     align： 'center'                 }、yellow2：{                     color： "＃FFEF3B"、                     fontSize：20、                     padding：[                     1.5、0 ]、                     align： 'center'                 }、                 white：{ color： "＃E0E0E0"、                     align： 'center'、                     fontSize：15、                     padding：[1.5、0]                 }、


















                赤：{                     色： '＃EF3E5A'、                     fontSize：25、                     整列： '中央'                 }、                 赤2：{                     色： '＃EF3E5A'、                     fontSize：20、                     整列： '中央'                 }             }

凡例：{                     orient： 'vertical'、                     top：'12％ '、                     left：'50％'、                     itemGap：15、                     data：data_name 、                     icon： 'square'、                     textStyle：{                         color： "rgba（187、229、235 、1） "、                         fontSize：16、                         rich：rich                     }、                     formatter：function（name）{//ここでnameは凡例の要素名を表します                         for（var i in json）{//凡例配列をトラバースし                             ますvar str1; / /テキスト変数を定義する














                            if（json [i] .name == '新しい契約外国投資のバッチ'＆json [i] .name == name）{//各凡例の編集をカスタマイズ
                                str1 = name + "\ n {yellow |" + json [i] .value1 + '} \ tmillion USD \ nYellow2 |' + json [i] .value2 + '} \ t％';
                                break;
                            } else {                                 str1 = name + "\ n {red |" + json [i ] .value1 + '} \ t百万ドル\ n前年比の増加{red2 |' + json [i] .value2 + '} \ t％';                             }                         }                         return str1;                     }                 }

概要：カスタマイズするときは、凡例要素の名前と要素の値のみを編集することをお勧めします。残りのテキストコンテンツは、 echartのグラフィック属性を使用して編集してより適切にすることができます。

効果は次のとおりです。