diff --git a/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue b/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
index 79c28ad1..e4e341ce 100755
--- a/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
+++ b/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
@@ -32,6 +32,14 @@ export default {
type: Array,
required: true,
},
+ title: {
+ type: String,
+ default: '标题'
+ },
+ cusFormatter: {
+ type: Boolean,
+ default: false
+ }
},
data() {
return {
@@ -43,6 +51,7 @@ export default {
chartData: {
deep: true,
handler(val) {
+ console.log('val:::', val)
this.setOptions(val);
},
},
@@ -67,11 +76,19 @@ export default {
},
setOptions() {
const series = this.chartData.map((item) => {
+ const other = !item.show ? {
+ symbolSize: 0,
+ showSymbol: false,
+ lineStyle: {
+ width: 0,
+ color: 'rgba(0, 0, 0, 0)'
+ }
+ } : {}
return {
name: item.name,
type: 'line',
- stack: 'Total',
- areaStyle: {},
+ // stack: 'Total',
+ // areaStyle: {},
label: {
position: 'top',
},
@@ -82,40 +99,81 @@ export default {
smooth: true,
data: item.data,
showSymbol: false,
+ ...other
};
});
+ let numbers = this.chartData && this.chartData[0]?.data;
+ let maxNumber = Math.max(...numbers);
+ const cusFormatterObj = this.cusFormatter ? {
+ formatter: (params) => {
+ const taskAll = params.find(item => item.seriesName === '任务总数')
+ const taskCom = params.find(item => item.seriesName === '区间任务完成数')
+ const taskReject = params.find(item => item.seriesName === '拒绝总数')
+ return `
+
${taskCom?.seriesName}:${taskCom?.value}
+
+
${taskAll?.seriesName}:${taskAll?.value}
+
${taskReject?.seriesName}:${taskReject?.value}
+
`
+ }
+ } : {};
this.chart.setOption({
+ title: {
+ text: this.title,
+ textStyle: {
+ fontSize: '16px'
+ },
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ padding: 0,
+ },
tooltip: {
trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985',
- },
- },
+ ...cusFormatterObj
},
legend: {
data: this.chartData,
+ icon: 'circle',
+ top: 0,
},
toolbox: {
feature: {},
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
+ left: 0,
+ right: 0,
+ top: '18%',
+ bottom: '0',
containLabel: true,
},
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: this.times,
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: this.times,
+ nameTextStyle: {
+ width: '20px'
},
- ],
+ axisLabel: {
+ color: '#333'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ },
yAxis: [
{
type: 'value',
+ max: maxNumber,
},
],
series: series,
diff --git a/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js b/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
index bcd17bf0..122cb788 100755
--- a/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
+++ b/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
@@ -1,28 +1,28 @@
-import { debounce } from '@/utils'
+import { debounce } from '@/utils';
export default {
data() {
return {
- $_sidebarElm: null
- }
+ $_sidebarElm: null,
+ };
},
mounted() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
+ this.$_initResizeEvent();
+ this.$_initSidebarResizeEvent();
},
beforeDestroy() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
+ this.$_destroyResizeEvent();
+ this.$_destroySidebarResizeEvent();
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
+ this.$_initResizeEvent();
+ this.$_initSidebarResizeEvent();
},
deactivated() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
+ this.$_destroyResizeEvent();
+ this.$_destroySidebarResizeEvent();
},
methods: {
// use $_ for mixins properties
@@ -30,27 +30,29 @@ export default {
$_resizeHandler() {
return debounce(() => {
if (this.chart) {
- this.chart.resize()
+ this.chart.resize();
}
- }, 100)()
+ }, 100)();
},
$_initResizeEvent() {
- window.addEventListener('resize', this.$_resizeHandler)
+ window.addEventListener('resize', this.$_resizeHandler);
},
$_destroyResizeEvent() {
- window.removeEventListener('resize', this.$_resizeHandler)
+ window.removeEventListener('resize', this.$_resizeHandler);
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
- this.$_resizeHandler()
+ this.$_resizeHandler();
}
},
$_initSidebarResizeEvent() {
- this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
- this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+ this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
+ this.$_sidebarElm &&
+ this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
},
$_destroySidebarResizeEvent() {
- this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
- }
- }
-}
+ this.$_sidebarElm &&
+ this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
+ },
+ },
+};
diff --git a/threadpool/console/src/views/hippo4j/monitor/index.vue b/threadpool/console/src/views/hippo4j/monitor/index.vue
index 3e71ba63..ebe6d3fe 100644
--- a/threadpool/console/src/views/hippo4j/monitor/index.vue
+++ b/threadpool/console/src/views/hippo4j/monitor/index.vue
@@ -3,40 +3,175 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/threadpool/console/src/views/hippo4j/monitor/index1.vue b/threadpool/console/src/views/hippo4j/monitor/index1.vue
index 172296e0..0c73a01a 100755
--- a/threadpool/console/src/views/hippo4j/monitor/index1.vue
+++ b/threadpool/console/src/views/hippo4j/monitor/index1.vue
@@ -1,6 +1,6 @@
-
+