HTML自定义ECharts图例

Question

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

下面是我到目前为止所做的一些工作：https://jsfiddle.net/fwpzjnt7/1/

我不知道正确的函数/事件，使我的自定义图例可点击，以便我可以显示/隐藏选定的数据！

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

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

有谁知道如何使用操作/事件将其应用于我的自定义html图例？

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操作：

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

更多详细信息请访问：https://echarts.apache.org/en/api.html#action.legend.legendToggleSelect

您还可以隐藏默认图例(添加到选项列表legend: {show: false},)