fix:修复pie和表格的联动问题

This commit is contained in:
zhangyu
2021-07-23 10:11:09 +08:00
parent 36f0f5570c
commit 92391b7a0c
2 changed files with 33 additions and 39 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="pop-custom">
<div class="pop-custom" v-ele-click-outside="esc">
<div class="pop-title">{{$t('overall.select')}}</div>
<div class="pop-box custom-labels">
<div style="height: 100%; overflow: auto;">
@@ -19,19 +19,19 @@
</div>
</div>
<div class="custom-bottom-btns">
<button v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
<el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button>
<button v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
</el-button>
<el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button>
</el-button>
<div>
<button :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
<el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
<span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
</button>
<button :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save">
</el-button>
<el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
</el-button>
</div>
</div>
</div>
@@ -170,3 +170,8 @@ export default {
display: none;
}
</style>
<style scoped>
/deep/ .el-button--mini{
padding: 5px 7px;
}
</style>

View File

@@ -530,42 +530,31 @@ export default {
self.myChart.setOption({
legend: { selected: { [params.name]: true } }
})
self.chartOption.series[0].data.forEach((d, i) => {
// 遍历到当前点击的legend时
if (d.name === params.name) {
// 如果这个legend是已激活状态则取消激活并且查询全部
if (self.selectPieChartName === d.name) {
self.myChart.dispatchAction({
type: 'unselect',
seriesIndex: 0,
dataIndex: i
})
self.selectPieChartName = ''
self.loadPieTableData()
} else { // 否则激活并且查询当前name的数据
self.selectPieChartName = d.name
const index = self.chartOption.series[0].data.findIndex(d => d.name === params.name)
if (self.selectPieChartName !== params.name) {
self.myChart.dispatchAction({
type: 'select',
seriesIndex: 0,
dataIndex: i
dataIndex: index
})
self.selectPieChartName = params.name
self.loadPieTableData(params.name)
}
} else {
self.myChart.dispatchAction({
type: 'unselect',
seriesIndex: 0,
dataIndex: i
dataIndex: index
})
self.selectPieChartName = ''
self.loadPieTableData(this.allSelectPieChartName)
}
})
})
// 饼图色块点击事件
this.myChart.on('click', function (echartParams) {
// 若是已选,则点击后取消选择,并查询全部数据
if (echartParams.name === self.selectPieChartName) {
self.selectPieChartName = ''
self.loadPieTableData()
self.loadPieTableData(this.allSelectPieChartName)
} else { // 否则查询当前name数据
self.selectPieChartName = echartParams.name
self.loadPieTableData(echartParams.name)