react中如何通过自己的写的复选框动去动态修改echars的折线的显示和隐藏

在React中，可以通过state来控制复选框的选中状态，然后根据选中状态来控制echarts折线的显示和隐藏。

首先，在React组件中定义一个state，用来保存复选框的选中状态，如下：

class MyComponent extends React.Component {
  state = {
    lineVisible: {
      line1: true,
      line2: true,
      line3: true,
    }
  }

  handleCheckboxChange = (lineKey) => {
    const { lineVisible } = this.state;
    this.setState({
      lineVisible: {
        ...lineVisible,
        [lineKey]: !lineVisible[lineKey],
      },
    });
  }

  render() {
    const { lineVisible } = this.state;
    return (
      <div>
        <div>
          <label>
            <input
              type="checkbox"
              checked={lineVisible.line1}
              onChange={() => this.handleCheckboxChange('line1')}
            />
            Line 1
          </label>
          <label>
            <input
              type="checkbox"
              checked={lineVisible.line2}
              onChange={() => this.handleCheckboxChange('line2')}
            />
            Line 2
          </label>
          <label>
            <input
              type="checkbox"
              checked={lineVisible.line3}
              onChange={() => this.handleCheckboxChange('line3')}
            />
            Line 3
          </label>
        </div>
        <div>
          {/* echarts组件 */}
        </div>
      </div>
    );
  }
}

在上面的代码中，我们定义了一个`lineVisible`对象，用来保存每条折线的显示状态。然后在`handleCheckboxChange`方法中，根据选中状态修改对应折线的显示状态，并更新state。

接下来，我们需要根据`lineVisible`对象的状态来动态修改echarts折线的显示和隐藏。这里我们可以通过`echarts`的`setOption`方法来实现。我们可以在`componentDidMount`和`componentDidUpdate`生命周期方法中监听`lineVisible`对象的变化，然后根据变化重新设置echarts的option。

class MyComponent extends React.Component {
  state = {
    lineVisible: {
      line1: true,
      line2: true,
      line3: true,
    }
  }

  // ...

  componentDidMount() {
    this.initChart();
  }

  componentDidUpdate() {
    this.setChartOption();
  }

  initChart = () => {
    const chartDom = document.getElementById('chart');
    const chart = echarts.init(chartDom);
    this.chart = chart;
    this.setChartOption();
  }

  setChartOption = () => {
    const { lineVisible } = this.state;
    const option = {
      // echarts option
      series: [
        {
          name: 'Line 1',
          type: 'line',
          data: [/* data */],
          show: lineVisible.line1, // 根据lineVisible对象的状态设置折线显示和隐藏
        },
        {
          name: 'Line 2',
          type: 'line',
          data: [/* data */],
          show: lineVisible.line2,
        },
        {
          name: 'Line 3',
          type: 'line',
          data: [/* data */],
          show: lineVisible.line3,
        },
      ],
    };
    this.chart.setOption(option);
  }

  render() {
    // ...
    return (
      <div>
        <div>
          {/* 复选框 */}
        </div>
        <div>
          <div id="chart" style={{ width: '100%', height: '400px' }}></div>
        </div>
      </div>
    );
  }
}

在上面的代码中，我们定义了`initChart`和`setChartOption`两个方法，分别用来初始化echarts和设置echarts的option。在`setChartOption`方法中，我们根据`lineVisible`对象的状态设置折线的显示和隐藏，并调用`echarts`的`setOption`方法重新设置option。

最后，我们在组件中渲染echarts组件，并在`componentDidMount`方法中初始化echarts，然后在`componentDidUpdate`方法中根据`lineVisible`对象的状态重新设置echarts的option。这样，当复选框的选中状态发生变化时，echarts的折线也会随之动态显示和隐藏。