关于前端:实现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>