fuguobin
11 months ago
8 changed files with 691 additions and 207 deletions
@ -0,0 +1,340 @@ |
|||
<template> |
|||
<div ref="complaintRef" id="returnChart" class="complaintLine" :style="{ height, width }" /> |
|||
</template> |
|||
<script setup> |
|||
import * as echarts from 'echarts'; |
|||
import { randomColor, endTime, debounce } from '@/utils/index'; |
|||
import { getBackTemperatureRanking } from '@/api/dashboard/index'; |
|||
// import { Ref } from 'vue'; |
|||
// const complaintRef: Ref<HTMLElement | any> = ref(null); |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const timer = ref(); |
|||
const isCurrentRoute = ref(true); |
|||
const mapEcharts = ref(); |
|||
|
|||
const props = defineProps({ |
|||
id: { |
|||
type: String, |
|||
default: 'lineChart' |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '200px', |
|||
required: true |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '200px', |
|||
required: true |
|||
} |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
getHeatRate(); |
|||
}); |
|||
// watchEffect(() => { |
|||
// const dataStr = counterStore.dateStr; |
|||
// if (dataStr != '') { |
|||
// yearMonthDay.value = counterStore.dateStr.split('-'); |
|||
// getHeatRate(); |
|||
// } |
|||
// }); |
|||
function getHeatRate() { |
|||
//获取图表数据 |
|||
const params = {}; |
|||
getBackTemperatureRanking().then(res => { |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
dataInfo(res.data); |
|||
} |
|||
}); |
|||
} |
|||
function dataInfo(data) { |
|||
const defualData = data; |
|||
// const defualData = [ |
|||
// { |
|||
// cdate: '2016', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '20.9,13.82,3.6,0.56,1.49,9.48,32,21,65,19' |
|||
// }, |
|||
// { |
|||
// cdate: '2017', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '18.7,12.82,13.6,9.56,12.49,13.48,21,23,52,53' |
|||
// }, |
|||
// { |
|||
// cdate: '2018', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '14.9,18.82,7.6,19.56,13.49,17.48,80,33,63,42' |
|||
// }, |
|||
// { |
|||
// cdate: '2019', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '16.9,3.82,13.6,15.56,12.49,14.48,54,35,40,20' |
|||
// }, |
|||
// { |
|||
// cdate: '2020', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '3.8,8.82,13.6,21.56,15.49,19.2,16,19,24,52' |
|||
// }, |
|||
// { |
|||
// cdate: '2021', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '23.9,16.82,13.6,17.56,14.49,19.98,18,12,30,35' |
|||
// }, |
|||
// { |
|||
// cdate: '2022', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '12,23,46,52,39,32,25,28,31,37' |
|||
// }, |
|||
// { |
|||
// cdate: '2023', |
|||
// cname: '换热站1,换热站2,换热站3,换热站4,换热站5,换热站6,换热站7,换热站8,换热站9,换热站10', |
|||
// cut: '52,59,60,49,42,36,10,9,21,28' |
|||
// } |
|||
// ]; |
|||
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; |
|||
const ccolors = {}; |
|||
const chart = echarts.init(document.getElementById('returnChart')); |
|||
mapEcharts.value = chart; |
|||
var updateFrequency = 1000; // 数据更新速度 |
|||
var years = []; |
|||
var startIndex = 0; |
|||
for (var i = 0; i < defualData.length; ++i) { |
|||
years.push(defualData[i]); |
|||
} |
|||
// 获取第一个数据 |
|||
var startYear = years[startIndex].cdate; |
|||
var startName = years[startIndex].cname.split(','); |
|||
var startCut = years[startIndex].cut.split(','); |
|||
for (let i = 0; i < startName.length; i++) { |
|||
if (i < 6) { |
|||
ccolors[startName[i]] = colors[i]; |
|||
} else { |
|||
ccolors[startName[i]] = randomColor(); |
|||
} |
|||
} |
|||
console.log(ccolors); |
|||
|
|||
const options = { |
|||
// tooltip: { |
|||
// trigger: 'axis', |
|||
// axisPointer: { |
|||
// type: 'shadow' |
|||
// } |
|||
// }, |
|||
legend: { |
|||
right: 100, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
}, |
|||
grid: { |
|||
top: '0', |
|||
left: '0', |
|||
right: '10%', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
//Y轴滑动条 |
|||
{ |
|||
type: 'slider', |
|||
show: true, |
|||
yAxisIndex: [0], |
|||
width: 8, |
|||
height: '90%', |
|||
right: '10', |
|||
startValue: 0, |
|||
endValue: 10, |
|||
zoomLoxk: true, |
|||
top: 'middle' |
|||
}, |
|||
{ |
|||
type: 'inside', |
|||
yAxisIndex: [0], |
|||
zoomOnMouseWheel: true, |
|||
moveOnMouseMove: true, |
|||
moveOnMouseWheel: true |
|||
} |
|||
], |
|||
xAxis: { |
|||
max: 'dataMax', |
|||
type: 'value', |
|||
nameTextStyle: { |
|||
color: '#000', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#000', |
|||
formatter: function (n) { |
|||
return Math.round(n) + ''; |
|||
} |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
type: 'dashed', |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
}, |
|||
dataset: { |
|||
source: defualData |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
nameTextStyle: { |
|||
color: '#000', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#000', |
|||
rich: { |
|||
flag: { |
|||
fontSize: 25, |
|||
padding: 5 |
|||
} |
|||
} |
|||
}, |
|||
inverse: true, |
|||
animationDuration: 300, //第一次柱条排序动的时长 |
|||
animationDurationUpdate: 300, //第一次后柱条排序动画时长 |
|||
data: startName |
|||
}, |
|||
series: [ |
|||
{ |
|||
// name: '2023', |
|||
type: 'bar', |
|||
// barWidth: 20, //柱宽 |
|||
showBackground: false, |
|||
realtimeSort: true, // 开启该动态排序效果 |
|||
itemStyle: { |
|||
color: function (param) { |
|||
return ccolors[param.name]; |
|||
} |
|||
}, |
|||
encode: { |
|||
x: 0, |
|||
y: 3 |
|||
}, |
|||
label: { |
|||
show: true, |
|||
precision: 1, |
|||
position: 'right', |
|||
color: '#000', |
|||
valueAnimation: false // 柱子右侧的数字动态变化 |
|||
}, |
|||
emphasis: { |
|||
focus: 'series' //聚焦当前高亮的数据所在的系列的所有图形 |
|||
}, |
|||
data: startCut |
|||
} |
|||
], |
|||
animationDuration: 0, |
|||
animationDurationUpdate: 3000, |
|||
animationEasing: 'linear', |
|||
animationEasingUpdate: 'linear', |
|||
graphic: { |
|||
elements: [ |
|||
{ |
|||
type: 'text', |
|||
right: 50, |
|||
bottom: 50, |
|||
style: { |
|||
text: startYear, |
|||
font: 'bolder 80px monospace', |
|||
fill: 'rgba(100, 100, 100, 0.25)' |
|||
}, |
|||
z: 100 |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
chart.setOption(options); |
|||
for (var i = startIndex; i < defualData.length - 1; ++i) { |
|||
(function (i) { |
|||
setTimeout(function () { |
|||
getDeviceInfos(years[i + 1]); |
|||
}, (i + 1) * updateFrequency); |
|||
})(i); |
|||
} |
|||
function getDeviceInfos(year) { |
|||
options.yAxis.data = year.cname.split(','); |
|||
options.series[0].data = year.cut.split(','); |
|||
options.graphic.elements[0].style.text = year.cdate; |
|||
const chart = echarts.init(document.getElementById('returnChart')); |
|||
chart.setOption(options); |
|||
} |
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
} |
|||
onUnmounted(() => { |
|||
if (mapEcharts.value) { |
|||
//echarts销毁函数 |
|||
echarts.dispose(mapEcharts.value); |
|||
mapEcharts.value = null; |
|||
} |
|||
}); |
|||
// function getDeviceInfoss() { |
|||
// //轮询获取柱形图数据 |
|||
// const params = filterForm; |
|||
// params.startTime = currentEndTime.value; |
|||
// params.step = 6; |
|||
// params.stepType = '3'; |
|||
// params.queryType = 2; |
|||
// console.log(params); |
|||
// getDeviceInfos(params).then(res => { |
|||
// if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
// if (isCurrentRoute.value) { |
|||
// timer.value = setTimeout(async () => { |
|||
// await (timer.value && clearTimeout(timer.value)); |
|||
// await getDeviceInfoss(); |
|||
// }, 360000); |
|||
// } |
|||
// if (res.data.additionalInfo != null) { |
|||
// currentEndTime.value = res.data.additionalInfo.endTime; |
|||
// console.log(currentEndTime.value, res.data.mainInfos); |
|||
// } |
|||
// options.series.forEach(originalObj => { |
|||
// res.data.mainInfos.forEach(newObj => { |
|||
// if (originalObj.name === newObj.name) { |
|||
// newObj.data.map(item => { |
|||
// originalObj.data.push(item); |
|||
// }); |
|||
// } |
|||
// }); |
|||
// }); |
|||
// console.log(options.series); |
|||
// const chart = echarts.init(document.getElementById('returnChart')); |
|||
// chart.setOption(options); |
|||
// } else { |
|||
// clearTimeout(timer.value); |
|||
// } |
|||
// }); |
|||
// } |
|||
</script> |
|||
Loading…
Reference in new issue