使用 ECharts 中的 HTML 按钮激活/停用图表线？

Question

我正在尝试使用 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>

jsfiddle

Answer 1

 var myChart = echarts.init(document.getElementById('benchmark')); var chartData = [820, 932, 901, 934, 1290, 1330, 1320]; var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ symbol: 'none', id: 'chartLine', lineStyle: { color: 'red'}, data: chartData, type: 'line' }] }; myChart.setOption(option); // var checkbox = document.body.querySelector('#flexCheckDefault'); checkbox.addEventListener('change', (e) => { var isChecked = e.target.checked; myChart.setOption({ series: [{ id: 'chartLine', lineStyle: { color: isChecked? 'red': 'transparent' } }] }) });

 body { padding: 50px 25px; }

 <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></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" checked> <label class="form-check-label" for="flexCheckDefault"> Activate & Deactivate line </label> </div> <div id="benchmark" style="min-height:500px;"></div>

Answer 2

只需使用setOption({series: []})更新图表实例或将transparent设置为线条颜色。 将其包装到 function 中并单击按钮调用。 对于动作enable需要在相反的方向上执行相同的步骤。

使用 ECharts 中的 HTML 按钮激活/停用图表线？

问题描述

2 个解决方案

解决方案1
2 2020-12-08 16:07:33

解决方案2
1 2020-12-08 09:16:18

使用 ECharts 中的 HTML 按钮激活/停用图表线？

问题描述

2 个解决方案

解决方案1 2 2020-12-08 16:07:33

解决方案2 1 2020-12-08 09:16:18

解决方案1
2 2020-12-08 16:07:33

解决方案2
1 2020-12-08 09:16:18