让menu-list的统计框与点击地图出现echars图相关联

cemss

思路1：

1. 子组件menu-list发送（output）统计框的状态
2. 父组件map.component.ts监听统计框状态
3. 根据menu-list的统计状态，判断是否添加click点击地图事件
4. 点击地图生成echars图的clickMapToShowEchars函数

  //a.获取menu.items[0].active状态
  @Output() statusEmit: EventEmitter<boolean> = new EventEmitter();
  onClick(item: MenuItem, menu: Menu) {
    switch (menu.type) {
      case "select":
        menu.items.forEach(item => item.active = false)
        item.active = true;
        break;
      case "check":
        item.active = !item.active;
        break;
    }
    this.statusEmit.emit(menu.items[0].active);
  }

 //b.menu-list的statusEmit方法，发送（output）统计框的状态
 <app-menu-list (change)="onMenuChange($event)" (statusEmit)="getStatus($event)"></app- menu-list>


 //c.父组件map.component.ts监听统计框状态
 getStatus(status: boolean) {
    console.log(status);
    this.test(status)
  }
  
  public option = new Option();
  public popup:any;
  public clickMapToShowEchars1: any;
  //d.根据menu-list的统计状态，判断是否添加click点击地图事件
  test(status: boolean) {
    if (!status) {
      //当menu-list的统计状态为false，移除地图上的popup框
      if (this.popup) {
        this.popup.remove();
      }
      //如果menu-list中显示不统计，关闭click监听事件
      //off方法 第二个参数要传递与on相同地址相同名称的函数
      this.mapbox.map.off('click', this.clickMapToShowEchars1);
    }
    else {
      this.clickMapToShowEchars1 = this.clickMapToShowEchars.bind(this)
      this.mapbox.map.on('click', this.clickMapToShowEchars1);
    }
  }

  //e.点击地图生成echars图的clickMapToShowEchars函数
  private clickMapToShowEchars(event: MapMouseEvent) {
    console.log(event);
     //如果有popup窗口，则移除。（防止占用dom节点，使echars图不渲染）
    if (this.popup) {
      this.popup.remove();
    }
    //弹出一个窗口
    this.popup = new mapboxgl.Popup({ closeOnClick: true })
      .setLngLat([event.lngLat.lng, event.lngLat.lat])
      .setHTML('<div id="main" style="width:400px;height:300px;" echarts></div>')
      .addTo(this.mapbox.map)
      .setMaxWidth('none');
    console.log(event.lngLat.lng);
    console.log(event.lngLat.lat);
    // 基于准备好的dom，初始化echarts实例
    let mapDom = document.getElementById("main");
    let myChart = echarts.init(mapDom);
    // 绘制图表
    myChart.setOption(this.getOption());
  }
  
  //点击地图生成echars的数据
  getOption(): any {
    let 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'
      }]
    };
    console.log(option)
    return option;
  }
  

思路2：利用menu-list 的click方法得到统计框的状态

 //a.menu-list的change方法，发送（output）统计框（SelectMenu）的状态
  @Output() change: EventEmitter<new SelectMenu()> = new EventEmitter();
  onClick(item: MenuItem, menu: Menu) {
    switch (menu.type) {
      case "select":
        menu.items.forEach(item => item.active = false)
        item.active = true;
        break;
      case "check":
        item.active = !item.active;
        break;
    }
    this.change.emit(new SelectMenu(menu.name, item.value, item.active));
  }
  
 //b.父组件map.component.html监听统计框状态
 <app-menu-list (change)="onMenuChange($event)"></app- menu-list>

 //c.父组件map.component.ts监听统计框状态
  onMenuChange(e: SelectMenu) {
    //利用menu-list 的click方法得到统计框的状态
    this.judge(e.active)
  }