238 lines
6.7 KiB
Vue
238 lines
6.7 KiB
Vue
<template>
|
|
<!-- ITIC -->
|
|
<view>
|
|
|
|
<l-echart ref="echartRef" @finished="initChart"></l-echart>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
|
|
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
data: {
|
|
type: [Object],
|
|
},
|
|
index: {
|
|
type: [Number],
|
|
},
|
|
unit: {
|
|
type: [Array],
|
|
}
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
option: {
|
|
backgroundColor: '#fff',
|
|
grid: {
|
|
left: '0px',
|
|
right: '10rpx',
|
|
bottom: '0rpx',
|
|
top: '25px',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
right: '10px',
|
|
top: '0px',
|
|
icon: 'rect',
|
|
itemWidth: 20,
|
|
itemHeight: 2,
|
|
itemGap: 8,
|
|
itemStyle: {
|
|
borderWidth: 0,
|
|
},
|
|
textStyle: {
|
|
fontSize: 10,
|
|
},
|
|
padding: [5, 5, 5, 10],
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
splitLine: { show: false },
|
|
axisLine: { show: true },
|
|
axisTick: { show: false },
|
|
axisLabel: {
|
|
fontSize: 10,
|
|
interval: 0,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
nameLocation: 'end',
|
|
nameGap: 10,
|
|
minInterval: 1,
|
|
nameTextStyle: {
|
|
fontSize: 12,
|
|
padding: [28, 10, 0, 0],
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
|
|
},
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: 'A相',
|
|
type: 'line',
|
|
data: [
|
|
|
|
],
|
|
showSymbol: false,
|
|
smooth: true,
|
|
tooltips: {
|
|
show: false,
|
|
},
|
|
color: '#DAA520',
|
|
},
|
|
{
|
|
name: 'B相',
|
|
type: 'line',
|
|
data: [
|
|
|
|
],
|
|
showSymbol: false,
|
|
smooth: true,
|
|
tooltips: {
|
|
show: false,
|
|
},
|
|
color: '#2E8B57',
|
|
},
|
|
{
|
|
name: 'C相',
|
|
type: 'line',
|
|
data: [
|
|
|
|
],
|
|
showSymbol: false,
|
|
smooth: true,
|
|
tooltips: {
|
|
show: false,
|
|
},
|
|
color: '#A52a2a',
|
|
},
|
|
],
|
|
},
|
|
status: 'loading',
|
|
echartRef: null,
|
|
pointI: [],
|
|
xLabelShowIndices: new Set(),
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.initChart()
|
|
// console.log('🚀 ~ props.data:', this.props.data)
|
|
},
|
|
|
|
methods: {
|
|
init() { },
|
|
async initChart() {
|
|
if (!this.$refs.echartRef) return
|
|
try {
|
|
this.echartRef = await this.$refs.echartRef.init(echarts)
|
|
this.setOption()
|
|
|
|
|
|
this.echartRef.setOption(this.option, true)
|
|
} catch (error) {
|
|
console.error('图表初始化失败:', error)
|
|
}
|
|
},
|
|
formatXAxisLabel(val, index) {
|
|
return this.xLabelShowIndices.has(index) ? String(val) : ''
|
|
},
|
|
getYAxisRange() {
|
|
const values = []
|
|
;['A', 'B', 'C'].forEach((key) => {
|
|
; (this.data[key] || []).forEach((p) => {
|
|
const v = p[1]
|
|
if (v !== null && v !== undefined && !Number.isNaN(Number(v))) {
|
|
values.push(Number(v))
|
|
}
|
|
})
|
|
})
|
|
if (!values.length) return {}
|
|
const dataMax = Math.max(...values)
|
|
const dataMin = Math.min(...values)
|
|
let min = 0
|
|
let max = 0
|
|
if (dataMin > 0) {
|
|
min = Math.floor(dataMin / 1.3)
|
|
} else {
|
|
min = Math.floor(dataMin * 1.3)
|
|
}
|
|
if (dataMax > 0) {
|
|
max = Math.ceil(dataMax * 1.3)
|
|
} else {
|
|
max = Math.ceil(dataMax / 1.3)
|
|
}
|
|
|
|
|
|
if (min === max) {
|
|
min -= 1
|
|
max += 1
|
|
}
|
|
return { min, max }
|
|
},
|
|
buildXLabelShowIndices(xLabels) {
|
|
const len = xLabels.length
|
|
if (len === 0) return new Set()
|
|
const showIndices = new Set([0, len - 1])
|
|
const zeroIdx = xLabels.findIndex((x) => Number(x) === 0)
|
|
if (zeroIdx >= 0) {
|
|
showIndices.add(zeroIdx)
|
|
} else if (len > 2) {
|
|
showIndices.add(Math.floor((len - 1) / 2))
|
|
}
|
|
return showIndices
|
|
},
|
|
setOption() {
|
|
if (!this.data) return
|
|
if (this.index == 0) {
|
|
this.option.legend.show = true
|
|
} else {
|
|
this.option.legend.show = false
|
|
}
|
|
this.option.yAxis.name = this.unit[this.index]
|
|
|
|
const points = this.data.A || []
|
|
const xLabels = points.map((p) => p[0])
|
|
this.xLabelShowIndices = this.buildXLabelShowIndices(xLabels)
|
|
|
|
this.option.xAxis.data = xLabels
|
|
this.option.xAxis.axisLabel.formatter = (val, index) => this.formatXAxisLabel(val, index)
|
|
this.option.series[0].data = points.map((p) => p[1])
|
|
this.option.series[1].data = (this.data.B || []).map((p) => p[1])
|
|
this.option.series[2].data = (this.data.C || []).map((p) => p[1])
|
|
|
|
const { min, max } = this.getYAxisRange()
|
|
this.option.yAxis.min = min
|
|
this.option.yAxis.max = max
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
computed: {},
|
|
|
|
watch: {
|
|
|
|
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped></style>
|