工作中遇到的问题2（点击ant-table中的每一行对应弹出图表）

图片所示为效果图：

需求：

当点击城镇开发边界，允许建设区域，限制建设区域的时候，可以弹出对应的echarts柱状图。

思路：

在点击行的时候，在行事件中写上一个分支控制语句，给showEcharts赋值，在组件中，利用v-show来控制echarts的显隐。

            //通过点击每一行，拿到其中的featurename属性给开关赋值。从而让战略新区组件中通过v-show来控制
            switch (param.featureName) {
              case '永久基本农田':
                  // param.showEcharts = 1  
                  this.showEcharts = 1   //控制永久基本农田echarts的开关  
                  this.echartsShow = true         
                break;
                case '城镇开发边界内用地':
                  this.showEcharts = 2    //控制城镇开发边界echarts的开关
                  this.echartsShow = true            
                break;
                case '城镇开发边界外用地':
                  this.showEcharts = 3   //控制永久基本农田echarts的开关 
                  this.echartsShow = true             
                break;
                case 'GZQ_010':
                  this.showEcharts = 4   //控制允许建设用地echarts的开关 
                  this.echartsShow = true            
                break;
                case 'GZQ_020':
                  this.showEcharts = 5    //控制有条件建设区echarts的开关 
                  this.echartsShow = true        
                break;
                case 'GZQ_030':
                  this.showEcharts = 6    //控制限制建设区echarts的开关 
                  this.echartsShow = true        
                break;
                case 'GZQ_040':
                  this.showEcharts = 7     //控制禁止建设区echarts的开关  
                  this.echartsShow = true       
                break;
              default:
                break;
            }
            console.log("我点击了哪一行",this.showEcharts);

下面是echart组件，直接v-show来绑定showEcharts的值来控制显隐即可

<!-- echarts组件 -->
    <div class="echarts1" v-show="echartsShow">
      <div class="yonngjiu" ref="myChart" style="width: 700px; height: 400px" id="myChart" v-show="this.showEcharts==1"></div>
      <div class="kaifabianjie" ref="myChart1" style="width: 700px; height: 400px" id="myChart1" v-show="this.showEcharts==2">城镇开发边界</div>
      <div class="allow" ref="myChart2" style="width: 700px; height: 400px" id="myChart2" v-show="this.showEcharts==4">允许建设用地</div>
      <div class="condition" ref="myChart3" style="width: 700px; height: 400px" id="myChart2" v-show="this.showEcharts==5">有条件建设区</div>
      <div class="limited" ref="myChart4" style="width: 700px; height: 400px" id="myChart2" v-show="this.showEcharts==6">限制建设区</div>
      <div class="abandon" ref="myChart5" style="width: 700px; height: 400px" id="myChart2" v-show="this.showEcharts==7">禁止建设区</div>
      <div class="echartsClose" @click="echartsClose">x</div>
    </div>