NEZ-1914 feat:根据chartShare参数开启图表联动

This commit is contained in:
zyh
2022-06-15 17:44:51 +08:00
parent 88816d36bc
commit 8e74fe1ee9
4 changed files with 33 additions and 51 deletions

View File

@@ -158,9 +158,10 @@ export default {
// timeSeries类型图表设置group 用于多表联动 // timeSeries类型图表设置group 用于多表联动
myChart.group = 'timeSeriesGroup' myChart.group = 'timeSeriesGroup'
myChart.getZr().on('mousemove', params => { myChart.getZr().on('mousemove', params => {
if (this.$store.state.panel.isconnect !== 1) { if (this.$store.state.panel.isConnect !== 'crosshair') {
return false return false
} }
// crosshair 模式才会执行
if (this.$store.state.panel.currentMousemove !== this.chartId) { if (this.$store.state.panel.currentMousemove !== this.chartId) {
this.$store.commit('setCurrentMousemove', this.chartId) this.$store.commit('setCurrentMousemove', this.chartId)
} }

View File

@@ -69,8 +69,8 @@ export default {
return !lodash.isEmpty(this.chartInfo.param.legend.values) return !lodash.isEmpty(this.chartInfo.param.legend.values)
}, },
// timeSeries类型图表联动 // timeSeries类型图表联动
isconnect () { isConnect () {
return this.$store.state.panel.isconnect return this.$store.state.panel.isConnect
} }
}, },
methods: { methods: {
@@ -101,7 +101,7 @@ export default {
if (echarts) { if (echarts) {
// 判断timeSeries类型图表 先取消多表联动 // 判断timeSeries类型图表 先取消多表联动
if (isTimeSeries(this.chartInfo.type) && this.isconnect) { if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
chart.disconnect('timeSeriesGroup') chart.disconnect('timeSeriesGroup')
} }
if (!hasGrey) { // 1.除当前legend外全置灰 if (!hasGrey) { // 1.除当前legend外全置灰
@@ -127,7 +127,7 @@ export default {
this.$set(this.isGrey, index, !this.isGrey[index]) this.$set(this.isGrey, index, !this.isGrey[index])
} }
// 判断timeSeries类型图表 建立多表联动 // 判断timeSeries类型图表 建立多表联动
if (isTimeSeries(this.chartInfo.type) && this.isconnect) { if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
chart.connect('timeSeriesGroup') chart.connect('timeSeriesGroup')
} }
if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') { if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {

View File

@@ -40,19 +40,6 @@
</el-input> </el-input>
</div> --> </div> -->
<!-- 测试图表联动 -->
<button slot="reference" class="top-tool-btn margin-r-10" @click="connect(1)" :class="{active:this.isconnect===1}">
on-1
</button>
<!-- 测试图表联动 -->
<button slot="reference" class="top-tool-btn margin-r-10" @click="connect(2)" :class="{active:this.isconnect===2}">
on-2
</button>
<!-- 测试图表联动 -->
<button slot="reference" class="top-tool-btn margin-r-10" @click="connect(false)" :class="{active:this.isconnect===false}">
off
</button>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time> <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
<!-- 切换查看模式 --> <!-- 切换查看模式 -->
@@ -294,9 +281,7 @@ export default {
// 导出html 以及 pdf的弹窗 // 导出html 以及 pdf的弹窗
exportBoxShow: false, exportBoxShow: false,
// 查看模式 // 查看模式
mode: '', mode: ''
// 多表联动timeSeries类型图表
isconnect: false
} }
}, },
components: { components: {
@@ -319,32 +304,6 @@ export default {
} }
}, },
methods: { methods: {
/**
* @param {*} value // 1 表示不显示tooltip // 2 表示显示tooltip // false 表示不联动
*/
connect (value) {
// 每次切换联动模式 tooltip设置显示
const option = {
tooltip: {
className: 'chart-time-series'
}
}
for (const key in chartCache) {
if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
continue
}
chartCache[key].setOption(option)
}
this.$store.commit('setCurrentMousemove', 0)
this.isconnect = value
if (this.isconnect) {
this.$store.commit('setConnect', this.isconnect)
echarts.connect('timeSeriesGroup')
} else {
this.$store.commit('setConnect', this.isconnect)
echarts.disconnect('timeSeriesGroup')
}
},
// 更新Weight // 更新Weight
updateWeight (value) { updateWeight (value) {
this.panelData = JSON.parse(JSON.stringify(value)) this.panelData = JSON.parse(JSON.stringify(value))
@@ -1022,8 +981,6 @@ export default {
time: this.searchTime, time: this.searchTime,
nowTimeType: this.nowTimeType nowTimeType: this.nowTimeType
}) })
// 设置图表联动
this.isconnect = this.$store.state.panel.isconnect
}, },
mounted () { mounted () {
// 监听键盘ESC事件 // 监听键盘ESC事件
@@ -1044,6 +1001,30 @@ export default {
} }
}, },
watch: { watch: {
'showPanel.params.chartShare': {
handler (value) {
// 每次切换联动模式 tooltip设置显示
const option = {
tooltip: {
className: 'chart-time-series'
}
}
for (const key in chartCache) {
if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
continue
}
chartCache[key].setOption(option)
}
this.$store.commit('setCurrentMousemove', 0)
if (value && value !== 'none') {
this.$store.commit('setConnect', value)
echarts.connect('timeSeriesGroup')
} else {
this.$store.commit('setConnect', value)
echarts.disconnect('timeSeriesGroup')
}
}
},
'filter.searchName': function (n, o) { 'filter.searchName': function (n, o) {
const temp = this const temp = this
setTimeout(function () { setTimeout(function () {

View File

@@ -21,7 +21,7 @@ const panel = {
// 查看模式 // 查看模式
mode: '', mode: '',
// timeSeries类型图表联动 // timeSeries类型图表联动
isconnect: false, isConnect: false,
// 当前鼠标所在的图表id // 当前鼠标所在的图表id
currentMousemove: 0 currentMousemove: 0
}, },
@@ -80,7 +80,7 @@ const panel = {
}, },
// 设置timeSeries类型图表联动 // 设置timeSeries类型图表联动
setConnect (state, value) { setConnect (state, value) {
state.isconnect = value state.isConnect = value
}, },
// 设置当前鼠标所在的图表id (timeSeries类型图表联动) // 设置当前鼠标所在的图表id (timeSeries类型图表联动)
setCurrentMousemove (state, value) { setCurrentMousemove (state, value) {