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