在echarts中，通过使用单选框radio代替legend控制显隐

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012832088/article/details/81626510

在echarts中，通过使用单选框radio代替legend控制显隐

业务需求：通过自定义的单选框代替legend控制显示与隐藏

第一步：获取单选框的value值

<div id="map"  style="width: 600px;height:400px;"></div>
  <div class="tabs_radios" id="tabs_radios">
       <div class="tabs_radio">
             <input type="radio"  value="radio1" onclick="lengedSelected()" id="tabs_radio-1" name="radio" checked="checked" /><label for="tabs_radio-1"><span>radio1</span></label>
         </div>
         <div class="tabs_radio">
             <input type="radio" value="no" onclick="lengedSelected()" id="tabs_radio-2" name="radio" /><label for="tabs_radio-2"><span>radio2</span></label>
         </div>
         <div class="tabs_radio">
             <input type="radio" value="so2" onclick="lengedSelected()" id="tabs_radio-3" name="radio" /><label for="tabs_radio-3"><span>radio3</span></label>
         </div>
         <div class="tabs_radio">
             <input type="radio" value="pm10" onclick="lengedSelected()" id="tabs_radio-4" name="radio" /><label for="tabs_radio-4"><span>radio4</span></label>
         </div>
         <div class="tabs_radio">
             <input type="radio" value="co" onclick="lengedSelected()" id="tabs_radio-5" name="radio" /><label for="tabs_radio-5"><span>radio5</span></label>
         </div>
     </div>

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
var tabs_radios = document.getElementById('tabs_radios');
var tabs_radios_input = monitor_radio_emission.getElementsByTagName('input');

第二步：调用dispatchAction方法即可。

function lengedSelected(){
   var radioValue;
   for(var i = 0;i<tabs_radios_input .length;i++){
     if(tabs_radios_input [i].checked){
       radioValue = tabs_radios_input [i].value;
       myChart.dispatchAction({
         type:'legendToggleSelect',
         name:radioValue
       })
     }
   }
   console.log(radioValue);
 }

即可