NEZ-1914 feat:根据chartShare参数开启图表联动
This commit is contained in:
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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') {
|
||||||
|
|||||||
@@ -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 () {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user