fix: 修改仪表盘的 resize事件

This commit is contained in:
zhangyu
2021-12-20 18:02:48 +08:00
parent afc7e44058
commit d895033e8b
2 changed files with 18 additions and 17 deletions

View File

@@ -69,7 +69,6 @@ export default {
initGaugeData (chartInfo, originalDatas) { initGaugeData (chartInfo, originalDatas) {
return new Promise(resolve => { return new Promise(resolve => {
let colorIndex = 0 let colorIndex = 0
console.log(originalDatas)
originalDatas.forEach((originalData, expressionIndex) => { originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => { originalData.forEach((data, dataIndex) => {
const gauge = { const gauge = {
@@ -87,7 +86,6 @@ export default {
gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last') gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
gauge.max = getMetricTypeValue(data.values, 'max') gauge.max = getMetricTypeValue(data.values, 'max')
gauge.min = getMetricTypeValue(data.values, 'min') gauge.min = getMetricTypeValue(data.values, 'min')
console.log(gauge.value)
gauge.label = data.metric gauge.label = data.metric
gauge.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex) gauge.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, 2) gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, 2)
@@ -133,12 +131,6 @@ export default {
}) })
}, },
renderGauge (layout) { renderGauge (layout) {
this.chartInstances.forEach(item => {
if (item && item.dispose) {
item.dispose()
}
})
this.chartInstances = []
return new Promise(resolve => { return new Promise(resolve => {
const width = this.boxWidth / layout.col const width = this.boxWidth / layout.col
const height = this.boxHeight / layout.row const height = this.boxHeight / layout.row
@@ -163,16 +155,17 @@ export default {
this.gaugeData.forEach((item, index) => { this.gaugeData.forEach((item, index) => {
const myChart = echarts.init(document.getElementById('chart-gauge-' + this.chartInfo.id + '-' + index)) const myChart = echarts.init(document.getElementById('chart-gauge-' + this.chartInfo.id + '-' + index))
const option = lodash.cloneDeep(this.chartOption) const option = lodash.cloneDeep(this.chartOption)
option.series[0].data.push(item) option.series[0].data.push(item)
option.series[0].max = item.max option.series[0].max = item.max
option.series[0].detail = { option.series[0].detail = {
fontSize: 24, fontSize: 24,
offsetCenter: [0, '40%'],
fontWeight: 'bolder', fontWeight: 'bolder',
formatter: (params) => { formatter: (params) => {
const showValue = chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(params, null, -1, 2) let showValue = chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(params, null, -1, 2).trim()
console.log(showValue) console.log(showValue)
if (item.mapping) {
showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
}
return showValue return showValue
}, },
color: lodash.get(item, 'mapping.color.text', 'auto') color: lodash.get(item, 'mapping.color.text', 'auto')
@@ -189,12 +182,21 @@ export default {
option.series[0].min = item.max == item.min ? 0 : item.min option.series[0].min = item.max == item.min ? 0 : item.min
myChart.setOption(option) myChart.setOption(option)
this.chartInstances.push(myChart) this.chartInstances.push(myChart)
console.log(item, index, this.chartOption) })
},
gaugeChartResize () {
this.chartInstances.forEach(item => {
console.log(123123123, item)
if (item && item.resize) {
item.resize()
}
}) })
}, },
resize () { resize () {
this.getLayout().then(layout => { this.getLayout().then(layout => {
this.renderGauge(layout) this.renderGauge(layout).then(() => {
this.gaugeChartResize()
})
}) })
} }
}, },
@@ -202,7 +204,6 @@ export default {
this.chartOption.color || (this.chartOption.color = initColor(20)) this.chartOption.color || (this.chartOption.color = initColor(20))
this.colorList = this.chartOption.color this.colorList = this.chartOption.color
this.initChart() this.initChart()
console.log(12313123)
}, },
beforeDestroy () { beforeDestroy () {
this.chartInstances.forEach(item => { this.chartInstances.forEach(item => {

View File

@@ -153,9 +153,9 @@ export default {
methods: { methods: {
...mapActions(['loginSuccess']), ...mapActions(['loginSuccess']),
login () { login () {
// if (this.loading || !this.license.valid) { if (this.loading || !this.license.valid) {
// return return
// } }
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) { if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
this.loading = true this.loading = true
this.$post('/sys/login', this.loginData).then(res => { this.$post('/sys/login', this.loginData).then(res => {