echarts にカスタム凡例データを実装する

ずっと昔、私は echarts を使い始めたばかりで、echarts での動的な凡例のフォーマッタ実装についてブログを更新しました。多くの人がどのように実装したかを尋ねに来ました。私はとても忙しくて混乱していたため、読んでいませんでした。最近時間が取れたのでアップデートしてみました。

次の図と同様に、多くの初心者にとっては始める方法がありません。実際、フォーマッタはデータに対していくつかの操作を実行できる標準関数であるため、echarts の属性のフォーマッタを直接使用することで解決できます。表示されたデータで十分です。

data(){
    
    
 let that = this
 return{
    
     
	option:>>legend
	legend: {
    
    
	    orient:'vertical',
	    // top: 'center',
	    top: '8%',
	    right: '13%',
	    width: '50%',
	    fontSize:'14',
	    itemGap:8,
	    itemHeight: 10,   //图例大小
	    formatter: function(labelName) {
    
    
	      const {
    
     dataList } = that
	      for (let index = 0; index < dataList.length; index++) {
    
    
	        const {
    
     name, value, percentage } = dataList[index];
	        if (dataList[index].name == labelName) {
    
    
	          return `${
      
      labelName}   ${
      
      value}   ${
      
      percentage}`
	        }
	      }
	    }
	  },
	}
}

実装の効果:

フォーマッタ パラメータは現在の凡例のラベルを返すため、現在のラベルを使用してグラフ データと一致させるだけで、その名前が属する項目のデータを取得して表示できます。

今回は、凡例の表示にデータ内のデータが使用されていますが、以前は、データの初期化とグラフの更新により系列内のデータが直接変更されるため、系列内のデータが使用されていました。

ps: フォーマッタの this は未定義であることに注意してください。そのため、data のデータを読み取る必要がある場合は、これを data() 関数に割り当てる必要があります。これにより、開発者は操作のために data のデータを直接取得できます。