EchartJS - 凡例を選択し、選択した項目のみを表示します

Question

私が持っているもの: ここに画像の説明を入力してください

凡例をクリックしたいときは、ここに画像の説明を入力してください しかし、私はこれを持っています：ここに画像の説明を入力してください

私の質問は、これは可能ですか? 十分に明確かどうかはわかりませんが、必要に応じて質問に答えます。

上記のコンテンツを中国語に翻訳し、HTML コードを保持し、新しいコンテンツを追加しないでください。

Answer 1

legendselectchanged event をリッスンし、dispatchAction を使用して凡例に対して actions を実行できます。

あなたが望む正確な動作がわかりません。小さな

var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var オプション; myChart.on('legendselectchanged', function (params) { console.log(params); // イベントをログに記録してその構造を確認します const 名 = params.name; myChart.dispatchAction({ タイプ: 'legendAllSelect' }); myChart.dispatchAction({ タイプ: 'legendInverseSelect' }); myChart.dispatchAction({ タイプ: 'legendSelect', 名前: 名前 }); }); オプション = { ツールチップ: { トリガー: 'アイテム' }、 伝説： { 上: '15%'、 左: '5%'、 方向: '垂直'、 textStyle: { fontSize: 25 }、 セレクター: [{ type: 'all' }] }、 シリーズ： [ { タイプ: 'パイ'、 半径: ['55%', '70%'], 回避ラベルオーバーラップ: false、 アイテムスタイル: { 境界半径: 35、 境界線の色: '#fff', 境界線の幅: 8 }、 ラベル: { 表示: 偽、 位置: '中央' }、 ラベル行: { 表示: 偽 }、 データ： [ { 値: 2、名前: 'LR-MS' }, { 値: 2、名前: 'LR-MB-30' }, { 値: 1、名前: 'LR-MS-RS485-DIN' } 】 } 】 }; オプション && myChart.setOption(オプション);