ECharts js - Custom HTML Legend

Question

I have created a pie chart using ECharts. Thus, I would like to use a custom HTML for my legend but I don't know how to use their events.

Here is a fiddle of what I've done so far: https://jsfiddle.net/fwpzjnt7/1/

I don't know the right function/event to make my custom legend clickable so I can show/hide the selected data!

I have found some events/actions here https://www.echartsjs.com/en/api.html#events

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

Does anyone know how can I use actions/events to apply it to my custom html legend?

Answer 1

I am assuming you are looking for something like the below chart where user will be able to filter chart.

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

Although this is an old question, I have stumbled upon the same problem recently and I have found an answer.

I will leave it here, in case someone will need it.

I used the API of echarts, namely legendToggleSelect action:

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

More details here: https://echarts.apache.org/en/api.html#action.legend.legendToggleSelect

You can also hide the default legend (add to the option list legend: {show: false},)