Realize the linkage between Echarts and the form, click the chart to dynamically screen data display

The requirement is to listen for the Echarts bar chart event to be clicked, and the callback function will filter and display the data on the form below the chart, as shown in the legend below

When clicked, the Date column shows only Jan

The code is as follows:

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
    },
}

Table Part Code

<el-table :data="tabledata_Mylist" // Data binding 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>