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