当前位置: 首页 > Web前端 > vue.js

实现echarts和form联动,点击图表动态过滤数据展示

时间:2023-04-01 11:48:07 vue.js

需求是监听echarts柱状图的点击事件,回调函数对图表下方的表单中的数据进行过滤展示。例如,单击以下示例后,Date列仅显示Jan代码:data(){tabledata_Mylist:[],statesOptions:[{value:'Jan',text:'Jan'},{value:'Feb',文本:'二月'},{值:'三月',文本:'三月'},{值:'四月',文本:'四月'},{值:'五月',文本:'五月'},{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){constproperty=column['property']returnrow[property]===value},}tablepartcode