Echartsでリストをクリックしてパイチャートを連動させる方法は何ですか。

リストとパイチャート連動を実現するためには、まずリストとパイチャートのデータを準備する必要があります。次に、Echartsのイベントリスナーを使用して、リストのクリックイベントで選択された項目のデータを取得し、そのデータを使用してパイチャートの情報を更新し、最後にパイチャートを再描画します。

以下は簡単なサンプルコードです：

HTMLのセクション:

<div id="list">
  <ul>
    <li data-value="30">选项1</li>
    <li data-value="50">选项2</li>
    <li data-value="20">选项3</li>
  </ul>
</div>
<div id="chart" style="width: 400px; height: 400px;"></div>

JavaScriptのセクション：

// 初始化饼图的数据
var pieData = [
  { value: 30, name: '选项1' },
  { value: 50, name: '选项2' },
  { value: 20, name: '选项3' }
];

// 初始化饼图的配置
var pieOptions = {
  series: [
    {
      type: 'pie',
      data: pieData
    }
  ]
};

// 绑定列表的点击事件
document.getElementById('list').addEventListener('click', function(e) {
  var li = e.target;
  if (li.tagName === 'LI') {
    var value = li.getAttribute('data-value');
    // 更新饼图的数据
    pieData = [
      { value: value, name: '选项1' },
      { value: 100 - value, name: '其他选项' }
    ];
    // 重新渲染饼图
    echarts.init(document.getElementById('chart')).setOption(pieOptions);
  }
});

以上のコードでは、リストの各オプションにdata-valueというカスタム属性を追加して対応する値を保存します。リストがクリックされたとき、クリックされたオプションの値を取得し、その値に基づいてパイチャートのデータを更新し、最後にパイチャートを再レンダリングします。