ECharts js - 自定义 HTML 图例

Question

我使用ECharts<\/a>创建了一个饼图。 因此，我想为我的图例使用自定义 HTML，但我不知道如何使用他们的事件。

这是我到目前为止所做的事情： https<\/a> :\/\/jsfiddle.net\/fwpzjnt7\/1\/

我不知道使我的自定义图例可点击的正确功能\/事件，因此我可以显示\/隐藏所选数据！

我在这里找到了一些事件\/操作https:\/\/www.echartsjs.com\/en\/api.html#events<\/a>

dispatchAction({
    type: 'legendToggleSelect',
    // legend name
    name: string
})

Answer 1

我假设您正在寻找类似于下图的内容，用户可以在其中过滤图表。

 var myChart = echarts.init(document.getElementById('main')); var option = { legend: { orient: 'vertical', left: 10, data: ['a', 'b', 'c', 'd', 'e'] }, series: [{ name: '访问来源', type: 'pie', radius: ['0%', '70%'], avoidLabelOverlap: false, labelLine: { normal: { show: false } }, data: [{ value: 335, name: 'a' }, { value: 310, name: 'b' }, { value: 234, name: 'c' }, { value: 135, name: 'd' }, { value: 1548, name: 'e' } ] }] }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script> <div id="main" style="width: 400px;height:400px;"></div>

Answer 2

虽然这是一个老问题，但我最近偶然发现了同样的问题，我找到了答案。

我会把它留在这里，以防有人需要它。

我使用了echarts的API，即legendToggleSelect<\/code>动作：

dispatchAction({
    type: 'legendToggleSelect',
    name: string // the name of the series you want to toggle
})