Echarts怎么實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖

要實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖，首先需要準(zhǔn)備好列表和餅圖的數(shù)據(jù)。然后，通過Echarts的事件監(jiān)聽機(jī)制，在列表點(diǎn)擊事件中獲取到選中項(xiàng)的數(shù)據(jù)，然后更新餅圖的數(shù)據(jù)，最后重新渲染餅圖。

以下是一個(gè)簡單的示例代碼：

HTML部分：

<div id="list">
  <ul>
    <li data-value="30">選項(xiàng)1</li>
    <li data-value="50">選項(xiàng)2</li>
    <li data-value="20">選項(xiàng)3</li>
  </ul>
</div>
<div id="chart" style="width: 400px; height: 400px;"></div>

JavaScript部分：

// 初始化餅圖的數(shù)據(jù)
var pieData = [
  { value: 30, name: '選項(xiàng)1' },
  { value: 50, name: '選項(xiàng)2' },
  { value: 20, name: '選項(xiàng)3' }
];

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

// 綁定列表的點(diǎn)擊事件
document.getElementById('list').addEventListener('click', function(e) {
  var li = e.target;
  if (li.tagName === 'LI') {
    var value = li.getAttribute('data-value');
    // 更新餅圖的數(shù)據(jù)
    pieData = [
      { value: value, name: '選項(xiàng)1' },
      { value: 100 - value, name: '其他選項(xiàng)' }
    ];
    // 重新渲染餅圖
    echarts.init(document.getElementById('chart')).setOption(pieOptions);
  }
});

在以上代碼中，通過給列表的每個(gè)選項(xiàng)添加自定義屬性data-value來存儲(chǔ)對應(yīng)的值。在列表的點(diǎn)擊事件中，獲取到被點(diǎn)擊的選項(xiàng)的值，然后根據(jù)該值更新餅圖的數(shù)據(jù)，最后重新渲染餅圖。