257 lines
8.6 KiB
Vue
257 lines
8.6 KiB
Vue
<template>
|
||
<!-- 监测温度变化值趋势 -->
|
||
<div style="height: 100%">
|
||
<ChartsBox :boxTitle="`监测温度变化值趋势`">
|
||
<div ref="chartContainer" class="container"> </div>
|
||
</ChartsBox>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ChartsBox from '@/components/ChartsBox/index'
|
||
import { getTemperatureListAPI } from '@/api/home-foundation-pit.js'
|
||
import * as echarts from 'echarts'
|
||
// require('echarts/theme/macarons')
|
||
import 'echarts/theme/macarons'
|
||
export default {
|
||
components: { ChartsBox },
|
||
props: {
|
||
deviceId: {
|
||
type: [String, Number],
|
||
default: () => '',
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
xData: [],
|
||
yData: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.$nextTick(() => {
|
||
// this.initChart()
|
||
// })
|
||
|
||
this.getTemperatureListData()
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return
|
||
}
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
|
||
window.removeEventListener('resize', this.handleResize)
|
||
if (this.chart) {
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
}
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
// 使用 ref 获取 container 元素
|
||
const container = this.$refs.chartContainer
|
||
this.chart = echarts.init(container, 'macarons')
|
||
|
||
this.chart.setOption({
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.xData,
|
||
boundaryGap: false,
|
||
axisTick: { show: true },
|
||
axisLabel: {
|
||
color: '#4494db',
|
||
overflow: 'truncate', // 溢出时显示省略号
|
||
width: 60, // 标签最大宽度（单位px）
|
||
ellipsis: '...', // 自定义省略符号（可选）
|
||
interval: 0, // 强制显示所有标签
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#4494db' },
|
||
},
|
||
// 添加x轴网格线虚线样式
|
||
},
|
||
yAxis: {
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
lineStyle: { color: '#4494db' },
|
||
},
|
||
// 添加y轴网格线虚线样式
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(123, 95, 75, 0.3)',
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
left: 10,
|
||
right: 15,
|
||
bottom: 5,
|
||
top: 12,
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'cross' },
|
||
padding: [5, 10],
|
||
},
|
||
series: [
|
||
{
|
||
name: '温度',
|
||
type: 'line',
|
||
smooth: true, // 启用平滑曲线
|
||
data: this.yData,
|
||
itemStyle: {
|
||
color: '#15a0c6',
|
||
},
|
||
lineStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(21, 160, 198, 1)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(230, 135, 26, 0.3)',
|
||
},
|
||
],
|
||
),
|
||
width: 2,
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(21, 160, 198, 0.2)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(21, 160, 198, 0.1)',
|
||
},
|
||
],
|
||
),
|
||
},
|
||
// 添加线条动画效果
|
||
animationDuration: 3000,
|
||
animationEasing: 'cubicInOut',
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
showSymbol: false, // 初始不显示点
|
||
// 高亮动画配置
|
||
emphasis: {
|
||
scale: true,
|
||
itemStyle: {
|
||
color: '#ffeb3b',
|
||
borderColor: '#fff',
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
// 线条动画效果
|
||
lineAnimation: {
|
||
duration: 3000,
|
||
easing: 'cubicInOut',
|
||
delay: function (idx) {
|
||
return idx * 100
|
||
},
|
||
},
|
||
effect: {
|
||
show: true,
|
||
period: 4, // 动画周期
|
||
trailLength: 0.2, // 动画轨迹长度
|
||
symbol: 'arrow', // 使用箭头符号
|
||
symbolSize: 10, // 设置箭头大小
|
||
loop: true, // 循环播放
|
||
// 动画的方向和效果
|
||
constantSpeed: 15, // 设定动画的速度
|
||
},
|
||
},
|
||
],
|
||
// 添加全局动画配置
|
||
animation: {
|
||
duration: 3000,
|
||
easing: 'cubicInOut',
|
||
seriesKey: 'line',
|
||
animationDelay: function (idx) {
|
||
return idx * 100
|
||
},
|
||
},
|
||
})
|
||
|
||
// 添加窗口大小变化时的自适应
|
||
window.addEventListener('resize', this.handleResize)
|
||
|
||
setTimeout(() => {
|
||
this.chart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
})
|
||
}, 500)
|
||
},
|
||
handleResize() {
|
||
if (this.chart) {
|
||
this.chart.resize()
|
||
}
|
||
},
|
||
|
||
async getTemperatureListData() {
|
||
const { data: res } = await getTemperatureListAPI({
|
||
typeId: '174435992023806894663',
|
||
})
|
||
console.log(
|
||
`%c🔍 深基坑监测 ----> 监测温度变化值趋势(右三) 数据出参 %c`,
|
||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||
'',
|
||
res,
|
||
)
|
||
|
||
if (res.length > 0) {
|
||
this.xData = res.map((e) => e.createTime)
|
||
this.yData = res.map((e) => {
|
||
return {
|
||
value: e.attrVal,
|
||
name: e.createTime,
|
||
}
|
||
})
|
||
} else {
|
||
this.xData = ['24:00']
|
||
this.yData = [
|
||
{
|
||
name: '24:00',
|
||
value: 0,
|
||
},
|
||
]
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #fff;
|
||
z-index: 9999;
|
||
}
|
||
</style>
|