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> <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-title">{{$t('overall.select')}}</div>
<div class="pop-box custom-labels"> <div class="pop-box custom-labels">
<div style="height: 100%; overflow: auto;"> <div style="height: 100%; overflow: auto;">
@@ -19,19 +19,19 @@
</div> </div>
</div> </div>
<div class="custom-bottom-btns"> <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> <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button> </el-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 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> <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button> </el-button>
<div> <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> <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
</button> </el-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 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> <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button> </el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -170,3 +170,8 @@ export default {
display: none; display: none;
} }
</style> </style>
<style scoped>
/deep/ .el-button--mini{
padding: 5px 7px;
}
</style>

View File

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