Vue-chart自定义legend事件

vue-chart 参考文档 —— vue-chart参考文档

<v-chart class="tapd_group_chart_body" :options="group_options" style="width:100%;" theme="walden" :auto-resize="true" @legendselectchanged="legendChange" autoresize/>

自定义legend事件，添加 @legendselectchanged="legendChange" 即可。 实现一个功能，点击一个 legend，关闭其他 legend，要重置一下 legend.data , 设置 legend.selected 才有用。

methods:{ legendChange (params) { const self = this if (params.name == '工时 (已填写需求的功能&技术需求)') { if(!this.workTime){ self.workTime = true self.group_options.legend.data = ['需求量', 'Bug量', '投诉单量(≥高)', '非版本优化量', '工时 (已填写需求的功能&技术需求)'] self.group_options.legend.selected = { '需求量' : false, 'Bug量' : false, '投诉单量(≥高)' : false, '非版本优化量' : false, '工时 (已填写需求的功能&技术需求)' : true } } else { self.workTime = false self.group_options.legend.data = ['需求量', 'Bug量', '投诉单量(≥高)', '非版本优化量', '工时 (已填写需求的功能&技术需求)'] self.group_options.legend.selected = { '需求量' : true, 'Bug量' : true, '投诉单量(≥高)' : true, '非版本优化量' : true, '工时 (已填写需求的功能&技术需求)' : false } } } }, }