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

【问题标题】：Activate/deactivate chart line using HTML button in ECharts?使用 ECharts 中的 HTML 按钮激活/停用图表线？
【发布时间】：2020-12-08 01:09:04
【问题描述】：

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

【问题讨论】：

标签： javascript html echarts

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回复！我完全是一个 ECharts 菜鸟。你能提供一个带代码的例子吗？
好的，看第二个答案。