From a0cdd7da4d60f6d82ddabc16cf733b7f90d0ed8d Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 13 Jun 2022 14:47:25 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-1914=20feat=EF=BC=9A=E8=B0=83=E7=A0=94?= =?UTF-8?q?=E5=9F=BA=E4=BA=8Eecharts=E5=AE=9E=E7=8E=B0=E6=97=B6=E5=BA=8F?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=A4=9A=E8=A1=A8tooltip=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/chart/chartTimeSeries.vue | 7 +++- .../chart/chart/options/chartTimeSeries.js | 14 +++++-- .../src/components/common/js/common.js | 2 +- .../src/components/page/dashboard/panel.vue | 38 +++++++++++++++---- 4 files changed, 48 insertions(+), 13 deletions(-) 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