阅读量:0
要实现点击列表联动饼图，首先需要准备好列表和饼图的数据。然后，通过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来存储对应的值。在列表的点击事件中，获取到被点击的选项的值，然后根据该值更新饼图的数据，最后重新渲染饼图。
