JSFiddle - React, Tailwind, and code Playground

by Ganesh_Babu_469

HTML

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

JavaScript

// SETUP
var myChart = echarts.init(document.getElementById('main'));
var option = {
  tooltip: {},
  legend: {
  show: false,
    data:['first', 'second', 'third']
  },
  
  series: [
    {
      hoverAnimation: false,
      type:'pie',
      radius: ['50%', '70%'],
      data:[
        {value:5, name:'first'},
        {value:10, name:'second'},
        {value:15, name:'third'}
      ]
    }
  ]
  
};

myChart.setOption(option);
// END SETUP 




myChart.on('legendselectchanged', function(params) {

  suppressSelection(myChart, params);  

  // Add custom functionality here 
  window.alert(params.name + ' was clicked');
});

function suppressSelection(chart, params) {
  chart.setOption({ animation: false });

  // Re-select what the user unselected
  chart.dispatchAction({
    type: 'legendSelect',
    name: params.name
  });   

  chart.setOption({ animation: true });
}