checkbox 联动画图

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

实现的代码如下：

<template>
  <div class="app-container">
    <div style="width:600px;height:800px;margin:0 auto;background-color:#fff;position:relative">
      <div style="background-color:yellow;width:100%;padding:10px;margin-bottom:20px;">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="checkedNodes" @change="handleCheckedNodesChange">
          <el-checkbox
            v-for="node in nodes"
            :key="node"
            :label="node"
            style="margin-right:20px;"
          >{{ node }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 图表容器 -->
      <div id="main" style="width:100%;height:80%;" />
    </div>
  </div>
</template>
<script>
import { EleResize } from '@/utils/esresize'// 图表自适应
export default {
  data() {
    return {
      checkAll: true,
      checkedNodes: [
        'first', 'second', 'third', 'four', 'five',
        'six', 'seven', 'eight', 'nine', 'ten'
      ],
      nodes: [
        'first', 'second', 'third', 'four', 'five',
        'six', 'seven', 'eight', 'nine', 'ten'
      ],
      isIndeterminate: false,
      xData: [1000, 2000, 3000, 4000, 5000],
      chartData: [
        [988, 800, 'first'],
        [1200, 1000, 'second'],
        [2000, 2800, 'third'],
        [3005, 2000, 'four'],
        [1200, 3000, 'five'],
        [5000, 3800, 'six'],
        [2005, 2000, 'seven'],
        [4200, 4000, 'eight'],
        [2100, 4800, 'nine'],
        [3205, 5000, 'ten']
      ]

    }
  },

  mounted() {
    // 初始画图
    this.initChart(document.getElementById('main'), this.chartData)
  },

  methods: {
    // 全选
    handleCheckAllChange(val) {
      this.checkedNodes = val ? this.nodes : []
      this.isIndeterminate = false

      var chartInfoData = val ? this.chartData : []
      this.initChart(document.getElementById('main'), chartInfoData)
    },
    // 单选
    handleCheckedNodesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.nodes.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.nodes.length

      var chartInfoData = []
      chartInfoData = this.chartData.filter((v, i) => {
        if (value.indexOf(v[2]) > -1) {
          return v
        }
      })
      this.initChart(document.getElementById('main'), chartInfoData)
    },

    // 初始画图
    initChart(domName, chartData) {
      var myChart = this.$echarts.init(domName)

      // 图表自适应
      const listener = function() {
        myChart.resize()
      }
      EleResize.on(domName, listener)

      var option = {
        title: {
          text: 'ECharts实例'
        },
        legend: {
          data: ['111'],
          orient: 'horizontal',
          bottom: 10
        },
        xAxis: {
          type: 'value',
          data: this.xData
        },
        yAxis: [
          {
            type: 'value',
            name: 'aaa',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'blue'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '111',
            type: 'scatter',
            yAxisIndex: 0, // 指定第一个y轴
            data: chartData,
            emphasis: { // 高亮的图形和标签样式
              focus: 'series',
              scale: true,
              label: {
                show: true,
                formatter: function(param) {
                  return param.data[2]
                },
                position: 'top'
              }
            },
            markPoint: {
              label: {
                show: true,
                formatter: function(param) {
                  console.log(param)
                  return param.data[1]
                },
                position: 'top'
              },
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

演示效果如下：