要實現點擊列表聯動餅圖,首先需要準備好列表和餅圖的數據。然后,通過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
來存儲對應的值。在列表的點擊事件中,獲取到被點擊的選項的值,然后根據該值更新餅圖的數據,最后重新渲染餅圖。