Echart实现动态线性图

效果如下图：

效果：
1：选择数据，对把应的数据加载到 线性图。
2：取消选择数据，对应的数据从图表上消失。

代码实现（Vue）

<template>
  <div style="margin-top :10px;">

    <el-row :gutter="20" style="vertical-align:middle;" >
      <el-col :span="4"><div class="maid-col" style="vertical-align: middle;">{
  {header.DATE_VAL}}</div></el-col>
      <el-col :span="3"><div class="maid-col">{
  {header.MEASURE_MAN}}</div></el-col>
      <el-col :span="3"><div class="maid-col">{
  {header.MEAS_STAN}}</div></el-col>
      <el-col :span="3"><div class="maid-col">{
  {header.PART_RATE}}</div></el-col>
      <el-col :span="3"><div class="maid-col">{
  {header.ALL_RATE}}</div></el-col>
    
      <el-col :span="3"><div class="">部位:
        <el-select v-model="condition.option" style="width:100px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div></el-col>
      <!-- <el-col :span="3"><div class="maid-col">
          标签:

      </div></el-col> -->
      <el-col :span="3"><div class=""> <el-button type="primary"  round >导出</el-button> </div></el-col>
    </el-row>


    <el-divider></el-divider>
    <el-row >
      <el-col :span="23">
        <transition name="el-zoom-in-top">
        <div id="myChart" v-show="charts_cfg.show" class="charts"  style="width: 1500px;"></div>
      </transition>
      </el-col>
   
    </el-row>

    <el-row :gutter="20" style="vertical-align:middle; " >
 
      <el-col >
        <div class="data">
        <el-table :data="rptData.GRID"  align="center"  :max-height='table_cfg.maxHeight'   @selection-change="handleSelectionChange" >
          <el-table-column
          type="selection"
          width="55"    >
        </el-table-column>
        <el-table-column
      type="index" label="序号"
      width="50">
    </el-table-column>
          <el-table-column   prop="PART_POS" label="部位" width="120">
          </el-table-column>
          <el-table-column   prop="POS_ID" label="单点编号" width="120">
          </el-table-column>
          <el-table-column   prop="POS_NAME" label="单点名称" width="120">
          </el-table-column>
          <el-table-column   prop="RL_VAL" label="R/L" width="80">
          </el-table-column>
          <el-table-column   prop="REMARK" label="备注" width="120">
          </el-table-column>
          <el-table-column   align="center" label="检规-规格" width="150">
            <el-table-column  prop="CHECK_SPEC_ADD"  label="+" width="50">
            </el-table-column>
            <el-table-column   prop="CHECK_SPEC_SUBTRA"  label="-" width="50">
            </el-table-column>
            <el-table-column  prop="CHECK_JUDGE"  label="判定" width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column   align="center" label="内规-规格" width="150">
            <el-table-column  prop="INNER_SPEC_ADD"  label="+" width="50">
            </el-table-column>
            <el-table-column   prop="INNER_SPEC_SUBTRA"  label="-" width="50">
            </el-table-column>
            <el-table-column  prop="INNER_JUDGE"  label="判定" width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column   align="center" label="平均值" width="20">
            <el-table-column  prop="ERR5"  label="Err" width="60">
            </el-table-column>
            <el-table-column prop="AVGN"   label="N=10" width="100">
            </el-table-column>
            <el-table-column prop="ERRN"   label="Err" width="60">
            </el-table-column>
           
          </el-table-column>
          <el-table-column   align="center" label="上一数据" width="150">
            <el-table-column  prop="LASTVAL"   label="10/13" width="80">
            </el-table-column>
            <el-table-column prop="ERRLAST"   label="Err" width="50">
            </el-table-column>
            
          </el-table-column>
    
          <el-table-column   prop="AVGN" label="V" width="80">
     
          </el-table-column>
          <el-table-column   prop="CP" label="CP" width="80">
     
          </el-table-column>
          <el-table-column   prop="CPK" label="CPK" width="80">
     
          </el-table-column>
          <el-table-column    label="趋势图" width="120">
     
          </el-table-column>
        </el-table></div>
      </el-col>
    </el-row>
  </div>
  </div>

</template>
<style>
    .maid-col {
    
        height: 20px;
        padding: 12px 0 0 10px;
    }
    
    .data {
    
        /* height: 300px; */
    }
    
    .charts {
    
        width: 100%;
        height: 300px;
    }
</style>

<script>
    import axios from "axios";
    import reportData from "./reportData.json";

    export default {
    
        name: 'hello',
        data() {
    
            return {
    
                myChart: undefined,
                chartOption: undefined,
                rptData: reportData,
                header: {
    },
                options: [{
    
                    "value": "左后门",
                    "lable": "左后门"
                }, {
    
                    "value": "右后门",
                    "lable": "右后门"
                }, {
    
                    "value": "左前门",
                    "lable": "左前门"
                }, {
    
                    "value": "右前门",
                    "lable": "右前门"
                }],
                condition: {
    
                    "option": "左前门"
                },
                table_cfg: {
    
                    maxHeight: 350
                },
                charts_cfg: {
    
                    show: false,
                }
            }
        },
        mounted() {
    
            this.init();
            this.drawLine();
        },
        methods: {
    
            init: function() {
    
                if (this.rptData.BASIC_INFO.length > 0) {
    
                    this.header = reportData.BASIC_INFO[0];
                };

                this.chartOption = {
    
                    notMerge: true,
                    title: {
    
                        text: '折线图堆叠'
                    },
                    // tooltip: {
    
                    //     trigger: 'axis'
                    // },
                    // legend: {
    
                    //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    // },
                    grid: {
    
                        left: