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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据