diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue index 8501878da..f5e3b731c 100644 --- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue +++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue @@ -166,6 +166,13 @@ export default { legend: { show: false }, + grid: { + top: 30, + left: 10, + right: 30, + containLabel: true, + bottom: 8// 156 + }, tooltip: { trigger: 'item', backgroundColor: 'rgba(221,228,237,1)', @@ -286,17 +293,34 @@ export default { }, // 设置数据, filter区分 setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) { - console.log(chartItem, seriesItem, this.option,this.chartIndex); + console.log(chartItem, seriesItem, this.option, this.chartIndex) this.data = chartItem + const self = this if (chartItem.type === 'bar') { this.option.xAxis = { type: 'category', + axisLine: { + show: false + }, + axisTick: { + show: false + }, + showAllSymbol: false, + axisPointer: { // y轴上显示指针对应的值 + show: false + }, axisLabel: { margin: 8, formatter: function (params) { + console.log(self.chartIndex); + console.log(document.getElementById('chart-' + self.chartIndex)) + const dataLength = seriesItem.length || 1 + const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余 + const length = Math.ceil((chartWidth) / 16) + console.log(chartWidth, length, dataLength , seriesItem.length) let val = '' - if (params.length > 4) { - val = params.substr(0, 4) + '...' + if (params.length > length) { + val = params.substr(0, length) + '...' return val } else { return params diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue index 39180154a..a8fd0db07 100644 --- a/nezha-fronted/src/components/charts/chart-list-group.vue +++ b/nezha-fronted/src/components/charts/chart-list-group.vue @@ -3,7 +3,7 @@ float:left; padding: 0px 10px 10px 0; position:relative; - box-sizing: content-box; + box-sizing: border-box; } .noData{ text-align: center diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 1788aac38..f6594025a 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -611,6 +611,7 @@ export default { const copies = maxValueCopies.copies const unit = maxValueCopies.unit const oldDot = maxValueCopies.oldDot + console.log(copies,maxValue,unit, chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)) let option = { title: { show: false @@ -1898,6 +1899,7 @@ export default { } const chartUnit = chartInfo.unit ? chartInfo.unit : 2 const unit = chartDataFormat.getUnit(chartUnit) + console.log(unit); minValue = minValue > 0 ? 0 : minValue maxValue = maxValue - minValue maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii) diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index a32cb2881..2362f782f 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -1733,7 +1733,8 @@ export default { if (this.showPanel.id) { this.panelId = this.showPanel.id } - this.$get('visual/panel/chart?id= ' + this.panelId).then(response => { + console.log(this.panelId) + this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => { if (response.code === 200) { this.groupArr = [] response.data.list.forEach((item, index) => {