fix:chartClock 分针错误回弹
This commit is contained in:
@changcode
@@ -23,10 +23,7 @@ import chartFormat from '@/components/chart/chartFormat'
|
||||
import { chartLegendPlacement } from '@/components/common/js/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { getChart, setChart } from '@/components/common/js/common'
|
||||
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'chart-clock',
|
||||
@@ -77,98 +74,38 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart (chartOption = this.chartOption) {
|
||||
const self = this
|
||||
chartOption.axisLabel = {
|
||||
margin: 8,
|
||||
formatter (params) {
|
||||
const dataLength = chartOption.series[0].data.length || 1
|
||||
const chartWidth = (document.getElementById('chart-canvas-' + self.chartInfo.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
|
||||
const length = Math.ceil((chartWidth) / 16)
|
||||
let val = ''
|
||||
if (params.length > length) {
|
||||
val = params.substr(0, length) + '...'
|
||||
return val
|
||||
} else {
|
||||
return params
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
|
||||
// setTimeout(() => {
|
||||
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
|
||||
myChart.setOption(chartOption)
|
||||
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
|
||||
this.isInit = false
|
||||
if (this.chartInfo.param && this.chartInfo.param.timeType === 'local') {
|
||||
setInterval(function () {
|
||||
const time = new Date()
|
||||
let h = time.getHours() >= 12 ? time.getHours() - 12 : time.getHours()
|
||||
const m = time.getMinutes() / 5
|
||||
const s = time.getSeconds() / 5
|
||||
h = h + time.getMinutes() / 60
|
||||
chartOption.animationDurationUpdate = 300
|
||||
chartOption.series[0].data[0].value = h
|
||||
chartOption.series[1].data[0].value = m.toFixed(1)
|
||||
chartOption.series[2].data[0].value = s.toFixed(1)
|
||||
myChart.setOption(chartOption)
|
||||
}, 1000)
|
||||
}
|
||||
// }, 200)
|
||||
},
|
||||
initBarData (chartInfo, seriesTemplate, originalDatas) {
|
||||
let colorIndex = 0
|
||||
const self = this
|
||||
const s = lodash.cloneDeep(seriesTemplate)
|
||||
s.data = []
|
||||
originalDatas.forEach((originalData, expressionIndex) => {
|
||||
originalData.forEach((data, dataIndex) => {
|
||||
this.isNoData = false
|
||||
if (s) {
|
||||
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
|
||||
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
|
||||
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
|
||||
s.data.push({
|
||||
value: value,
|
||||
realValue: value,
|
||||
showValue: showValue,
|
||||
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
|
||||
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
|
||||
labels: data.metric,
|
||||
seriesIndex: expressionIndex,
|
||||
dataIndex: dataIndex,
|
||||
mapping: mapping,
|
||||
label: {
|
||||
...s.label,
|
||||
formatter: this.pieFormatterLabel,
|
||||
color: mapping ? mapping.color.text : '#000000'
|
||||
},
|
||||
itemStyle: {
|
||||
color: mapping ? mapping.color.bac : this.colorList[colorIndex]
|
||||
}
|
||||
})
|
||||
colorIndex++
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('chartIsNoData', this.isNoData)
|
||||
return [s]
|
||||
},
|
||||
formatterFunc (params, ticket, callback) {
|
||||
const self = this
|
||||
return `
|
||||
<div>
|
||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
|
||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||
<div>value</div>
|
||||
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
||||
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
setTimeout(() => {
|
||||
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
|
||||
myChart.setOption(chartOption)
|
||||
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
|
||||
this.isInit = false
|
||||
if (this.chartInfo.param && this.chartInfo.param.timeType === 'local') {
|
||||
setInterval(function () {
|
||||
const date = new Date()
|
||||
const second = date.getSeconds()
|
||||
const minute = date.getMinutes() + second / 60
|
||||
const hour = (date.getHours() % 12) + minute / 60
|
||||
chartOption.animationDurationUpdate = 300
|
||||
chartOption.series = [{
|
||||
name: 'hour',
|
||||
animation: hour !== 0,
|
||||
data: [{ value: hour }]
|
||||
}, {
|
||||
name: 'minute',
|
||||
animation: minute !== 0,
|
||||
data: [{ value: minute }]
|
||||
}, {
|
||||
name: 'minute',
|
||||
animation: second !== 0,
|
||||
data: [{ value: second }]
|
||||
}]
|
||||
myChart.setOption(chartOption)
|
||||
}, 1000)
|
||||
} else {
|
||||
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
Reference in New Issue
Block a user