diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index e80839a7e..54fb548a5 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -123,6 +123,11 @@ export default { myChart.setOption(chartOption) this.isInit && setChart(this.chartId, myChart) // 缓存;不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit = false + // timeSeries类型图表设置group 用于多表联动 + myChart.group = 'timeSeriesGroup' + getChart(this.chartId).on('dataZoom', function (params) { + console.log(params) + }) }, 200) }, getMinMaxFromData (originalDatas, chartUnit = 2) { @@ -193,7 +198,7 @@ export default { return { minTime, maxTime, minValue, maxValue, copies, unit, dot } }, xAxisLabelFormatter (minTime, maxTime) { - let self = this + const self = this return function (val, index) { const value = val * 1000 let offset = localStorage.getItem('nz-sys-timezone') diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js index fc47e9bf8..8393a5d32 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js @@ -38,7 +38,13 @@ export const chartTimeSeriesLineOption = { z: 9, animation: false, appendToBody: true, - className: 'chart-time-series' + className: 'chart-time-series', + axisPointer: { + type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer + label: { + show: false + } + } // formatter: 动态生成 }, color: initColor(), @@ -61,9 +67,9 @@ export const chartTimeSeriesLineOption = { fontSize: 10 // formatter: 动态生成 }, - axisPointer: { // y轴上显示指针对应的值 - show: true - }, + // axisPointer: { // y轴上显示指针对应的值 + // show: true + // }, splitLine: { show: true, lineStyle: { diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js index 5ccc57a0b..91099ac62 100644 --- a/nezha-fronted/src/components/common/js/common.js +++ b/nezha-fronted/src/components/common/js/common.js @@ -16,7 +16,7 @@ export function getUUID () { return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()) } -const chartCache = {} +export const chartCache = {} export function getChart (key) { return chartCache[`chart${key}`] diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index baa806ecd..649792f33 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -34,11 +34,20 @@
- - - - - + + + + + + @@ -156,7 +165,9 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import routerPathParams from '@/components/common/mixin/routerPathParams' import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin' import exportHtmlMixin from '@/components/common/mixin/exportHtml' -import FileSaver from 'file-saver' +import { chartCache } from '@/components/common/js/common' +import * as echarts from 'echarts' +// import FileSaver from 'file-saver' // import chartData from './testData' export default { name: 'panel', @@ -279,7 +290,9 @@ export default { // 导出html 以及 pdf的弹窗 exportBoxShow: false, // 查看模式 - mode: '' + mode: '', + // 多表联动(timeSeries类型图表) + isconnect: false } }, components: { @@ -302,6 +315,15 @@ export default { } }, methods: { + // 测试图表联动 + connect () { + this.isconnect = !this.isconnect + if (this.isconnect) { + echarts.connect('timeSeriesGroup') + } else { + echarts.disconnect('timeSeriesGroup') + } + }, // 更新Weight updateWeight (value) { this.panelData = JSON.parse(JSON.stringify(value)) @@ -335,6 +357,8 @@ export default { searchTime: JSON.stringify(this.searchTime), mode: this.mode } + console.log(param.nowTimeType) + console.log(param.searchTime) // this.getTableData() // this.getData(this.filter) const path = this.fromRoute.panel