レーダーマップのクリックイベント

onImageClick(E){ 

せLables = this.props.image_label;
IF(e.componentType === 'レーダー' && e.name.length> 0){
//レーダチャートラベルの名前をクリック
      LETラベル= e.name
} {他の
クリック//レーダーチャートは座標
; LET指数= e.event.topTarget .__ dimIdx
IF(インデックス=未定義!){
       指標を通じて//取得lableを
           ラベル= this.props.image_radar.radar.indicatorレット[インデックス]の.text; 


}
}
}


注:豊かなリッチテキストを使用したい、キャンバスにレンダリングする必要があります使用することは困難でSVG
<ReactEcharts OPTS = {{レンダラ'SVG'}} 
lazyUpdate = {TRUE}
notMerge = {TRUE}
onEvents = {{
'クリック':props.onImageClick
}}
OPTS = {{レンダラ'キャンバス'}}
オプション= { image_radar}
スタイル= {{高さ: '220px'、幅: '100%'、余白: '自動'}}
/>



レーダー:{
  
名前:{ 


TEXTSTYLE:{
たfontSize:12、
たfontWeight:700、
色: '#FFF'

}、
フォーマッタ:関数(値、インジケータ){
IF(値=== image_label){
リターン'{|' +値+ ":" + indicator.val + '}'
}他{
リターン'{B |' +値+ '}'
}
}、
リッチ:{
:{
backgroundColorの'#ff6c5e'、
パディング:5、
borderRadius:5、
}、
B:{
色: '#FFF'、
パディング:5
}
}
} 、

}

おすすめ

転載: www.cnblogs.com/mengdiezhuangzhou/p/12171942.html