实现echarts与表单联动，点击图表动态筛选数据展示

需求是监听点击echarts柱状图事件，回调函数对图表底下的表单进行数据的筛选展示，图例如下

点击后Date列只展示Jan

代码如下：

data(){
      tabledata_Mylist:[],
      statesOptions: [
        { value: 'Jan', text: 'Jan' },
        { value: 'Feb', text: 'Feb' },
        { value: 'Mar', text: 'Mar' },
        { value: 'Apr', text: 'Apr' },
        { value: 'May', text: 'May' },
        { value: 'Jun', text: 'Jun' },
        { value: 'Jul', text: 'Jul' },
        { value: 'Aug', text: 'Aug' },
        { value: 'Sep', text: 'Sep' },
        { value: 'Oct', text: 'Oct' },
        { value: 'Nov', text: 'Nov' },
        { value: 'Dec', text: 'Dec' }
      ],
      echart_Mychart: null,
      echart_Mychart_Option:{}
}

methods:{
     //监听图表点击事件
    Mychart_click_method_mounted() {
      this.echart_Mychart.on('click', params => {
        this.$http
          .get(
            'http://10.***/Mylist/' +
              params.name
          )
          .then(res => {
            console.log(res.data)
            this.tabledata_Mylist = res.data
          })
      })
    }
    
        // 表格筛选功能的方法.
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
}

表格部分代码

           <el-table
              :data="tabledata_Mylist"  //绑定数据
              height="320"
              stripe
              style="width: 110%"
              class="tableStyle"
            >
              <el-table-column
                prop="date"
                label="Date"
                width="100"
                column-key="id"
                :filters="statesOptions"
                :filter-method="filterHandler"  //筛选方法
                align="center"
              />
            </el-table>