Javascript 是否使用ECharts中的HTML按钮激活/停用图表行？_Javascript_Html_Echarts

Javascript 是否使用ECharts中的HTML按钮激活/停用图表行？

javascript html

Javascript 是否使用ECharts中的HTML按钮激活/停用图表行？,javascript,html,echarts,Javascript,Html,Echarts,我正在尝试使用ECharts js中的HTML按钮激活/停用图表行。我不想使用ECharts图例来执行此操作。我希望此HTML按钮具有此功能。这怎么可能？谢谢大家! 这是我的代码： <html> <script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1607268016278"></script> <link href="ht

我正在尝试使用ECharts js中的HTML按钮激活/停用图表行。我不想使用ECharts图例来执行此操作。我希望此HTML按钮具有此功能。这怎么可能？谢谢大家!

这是我的代码：

<html>
<script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1607268016278"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="form-check" style="margin-left: 100px;">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Activate & Deactivate line
  </label>
</div>

<div id="benchmark" style="min-height:500px;"></div>

<script>
var myChart = echarts.init(document.getElementById('benchmark'));
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
myChart.setOption(option);
</script>

</html>


激活和停用线路
var myChart=echarts.init（document.getElementById（'benchmark'）；
选项={
xAxis：{
类型：'类别'，
数据：[周一、周二、周三、周四、周五、周六、周日]
},
亚克斯：{
类型：“值”
},
系列：[{
数据：[8209329011934013301320]，
类型：“行”
}]
};
myChart.setOption（选项）；

只需使用

setOption（{series:[]}）

更新图表实例，或将

transparent

设置为线条颜色。将其包装到函数中并调用按钮单击。对于操作

启用

需要在相反方向执行相同的步骤。

var myChart=echarts.init（document.getElementById（'benchmark'）；
var chartData=[8209329011929013301320]；
var选项={
xAxis：{
类型：'类别'，
数据：[周一、周二、周三、周四、周五、周六、周日]
},
亚克斯：{
类型：“值”
},
系列：[{
符号：“无”，
id:'海图线'，
线型：{color:'red'}，
数据：图表数据，
类型：“行”
}]
};
myChart.setOption（选项）；
// 
var checkbox=document.body.querySelector（'flexCheckDefault'）；
复选框.addEventListener（'change'，（e）=>{
var isChecked=e.target.checked；
myChart.setOption({
系列：[{
id:'海图线'，
线型：{
颜色：已选中？“红色”：“透明”
}
}]
})
});
正文{
填充：50px 25px；
}

激活和停用线路
谢谢您的回复！我是个彻头彻尾的笨蛋。您能提供一个代码示例吗？好的，请参阅第二个答案。