diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index a545eca3e..36059fae7 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -84,7 +84,13 @@ export default { if (this.isNoData) { return } - chartOption.xAxis.data = chartOption.series[0].data.map(item => item.name) + chartOption.xAxis.data = chartOption.series[0].data.map(item => { + if (this.chartInfo.param.text == 'all' || this.chartInfo.param.text == 'legend') { + return item.name + } else { + return '' + } + }) chartOption.axisLabel = { margin: 8, formatter (params) { diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index bc405d6d1..1e8396804 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -47,24 +47,39 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' export default { name: 'chart-guage', mixins: [chartMixin, chartFormat], + watch: { + isFullscreen: { + immediate: true, + handler (n) { + console.log(n) + } + } + }, data () { return { gaugeData: [], boxWidth: 0, boxHeight: 0, boxPadding: 5, - chartInstances: [] + chartInstances: [], + timer: null } }, methods: { initChart () { - this.initGaugeData(this.chartInfo, this.chartData).then(() => { - this.getLayout().then(layout => { - this.renderGauge(layout).then(() => { - this.gaugeChartInit() + if (this.timer) { + clearTimeout(this.timer) + this.timer = null + } + this.timer = setTimeout(() => { + this.initGaugeData(this.chartInfo, this.chartData).then(() => { + this.getLayout().then(layout => { + this.renderGauge(layout).then(() => { + this.gaugeChartInit() + }) }) }) - }) + }, 200) }, initGaugeData (chartInfo, originalDatas) { this.gaugeData = [] @@ -161,7 +176,7 @@ export default { this.chartInstances = [] const self = this this.gaugeData.forEach((item, index) => { - const chartId = this.isFullScreen ? 'chart-gauge-screen-' : 'chart-gauge-' + const chartId = this.isFullscreen ? 'chart-gauge-screen-' : 'chart-gauge-' const myChart = echarts.init(document.getElementById(chartId + this.chartInfo.id + '-' + index)) const option = lodash.cloneDeep(this.chartOption) option.tooltip = {} @@ -252,6 +267,10 @@ export default { item.dispose() } }) + if (this.timer) { + clearTimeout(this.timer) + this.timer = null + } } } diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js index b11bb6a34..75b6c0648 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartBar.js +++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js @@ -1,6 +1,7 @@ const chartBarOption = { tooltip: { - trigger: 'axis', + show: true, + trigger: 'item', confine: false, extraCssText: 'z-index:1000;', z: 9, @@ -11,7 +12,10 @@ const chartBarOption = { show: false }, xAxis: { - type: 'category' + type: 'category', + axisTick: { + show: false + } }, yAxis: { type: 'value' diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js index da0e0dff6..a6d928d98 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js +++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js @@ -1,4 +1,13 @@ const chartGaugeOption = { + tooltip: { + show: true, + trigger: 'item', + confine: false, + extraCssText: 'z-index:1000;', + z: 9, + animation: false, + appendToBody: true + }, series: [ { type: 'gauge', diff --git a/nezha-fronted/src/components/chart/chart/options/chartPie.js b/nezha-fronted/src/components/chart/chart/options/chartPie.js index 159209127..79524c40a 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartPie.js +++ b/nezha-fronted/src/components/chart/chart/options/chartPie.js @@ -1,6 +1,7 @@ const chartPieOption = { tooltip: { - trigger: 'axis', + show: true, + trigger: 'item', confine: false, extraCssText: 'z-index:1000;', z: 9, diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index 753e63a23..b38d1e55d 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -2,7 +2,7 @@ import * as echarts from 'echarts' const formatUtil = echarts.format const chartTreemapOption = { tooltip: { - trigger: 'axis', + trigger: 'item', confine: false, extraCssText: 'z-index:1000;', z: 9, diff --git a/nezha-fronted/src/components/chart/chartFormat.js b/nezha-fronted/src/components/chart/chartFormat.js index dc68a2190..2e8354cd6 100644 --- a/nezha-fronted/src/components/chart/chartFormat.js +++ b/nezha-fronted/src/components/chart/chartFormat.js @@ -3,6 +3,15 @@ export default { pieFormatterLabel (params) { const self = this let str = '' + if (this.chartInfo.type == 'bar') { // 柱状图 单独处理 + if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text || this.chartInfo.param.text === 'all' ) { + str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue + return str + } + if (this.chartInfo.param.text === 'none' || this.chartInfo.param.text === 'legend') { + return str + } + } if (this.chartInfo.param.text === 'all') { str += params.data.alias str += '\n' @@ -58,6 +67,6 @@ export default { minValue = valueSorted.length ? valueSorted[0][1] : '' maxValue = valueSorted.length ? valueSorted[valueSorted.length - 1][1] : '' return { minTime, maxTime, minValue, maxValue } - }, + } } } diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 29414988c..4a437654f 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -47,7 +47,7 @@ :loading="loading" :minusTime="minusTime" :multipleTime="multipleTime" - :is-fullscreen="isFullscreen" + :isFullscreen="isFullscreen" :showAllData="showAllData" v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse" >