应急救援项目包结构新增v2

liujun0708-动火作业流程图逻辑修改
WenShiJun 2024-07-04 11:18:58 +08:00
parent 7b7b5da1f8
commit e42792bc57
3 changed files with 131 additions and 1 deletions

View File

@ -28,7 +28,6 @@ export default {
}
}
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,131 @@
<template>
<div :class="className"/>
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
refName: {
type: String,
default: 'chart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '365px'
},
smooth: {
type: Boolean,
default: true
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
// watch: {
// chartData: {
// deep: true,
// handler(val) {
// // this.setOptions(val)
// }
// }
// },
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.renewOption(this.chartData)
},
renewOption(chart_data) {
var series = []
for (let i = 0; i < chart_data.legend.length; i++) {
series[i] = {
name: chart_data.legend[i], itemStyle: {
normal: {
color: chart_data.color[i],
lineStyle: {
color: chart_data.color[i],
width: 2
}
}
},
smooth: this.smooth,
type: 'line',
data: chart_data.dataY[i],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
}
this.setOptions(series)
},
setOptions(series) {
this.chart.setOption({
xAxis: {
data: this.chartData.dataX,
type: 'category',
axisLabel: {
// x
show: true,
interval: 0// 使x
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: this.chartData.legend
},
series: series
})
}
}
}
</script>