169 lines
5.6 KiB
Vue
169 lines
5.6 KiB
Vue
<template>
|
|
<div id="thermalChart" ref="thermalChart" style="width: 100%; height: 300px"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'thermalChart', //热点图组件
|
|
data() {
|
|
return {
|
|
endData: [],
|
|
startData: [],
|
|
odData: []
|
|
};
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
pageType: {
|
|
type: String
|
|
},
|
|
title: {
|
|
type: String
|
|
},
|
|
// status: {
|
|
// type: String
|
|
// },
|
|
// componentName: {
|
|
// type: String
|
|
// },
|
|
},
|
|
methods: {
|
|
drawThermalChart() {
|
|
let myChart = this.$echarts.init(this.$refs.thermalChart);
|
|
let option = {
|
|
grid: {
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
top: '20%',
|
|
containLabel: true
|
|
},
|
|
textStyle: { color: '#666', fontSize: 13 },
|
|
// toolbox: {
|
|
// show: true,
|
|
// feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
|
|
// iconStyle: { borderColor: '#666' }
|
|
// },
|
|
tooltip: {},
|
|
xAxis: {
|
|
nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
|
|
axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
|
|
axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
|
splitLine: { show: false },
|
|
axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
|
type: 'category',
|
|
data: this.endData,
|
|
splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
|
|
axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
|
|
axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
|
splitLine: { show: false },
|
|
axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
|
type: 'category',
|
|
data: ['gate1','gate2']
|
|
},
|
|
visualMap: [
|
|
{
|
|
min: 100,
|
|
max: 400,
|
|
calculable: false,
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
top: 20,
|
|
color: ['#C7021D', '#79E73C'],
|
|
text: ['高', '低'],
|
|
textStyle: { color: '#666', fontSize: 13 }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'heatmap',
|
|
// pageSize: 20,
|
|
pointSize: 10,
|
|
blurSize: 10,
|
|
data: [
|
|
[0, 0, 100],
|
|
[0, 1, 100],
|
|
[0, 2, 100],
|
|
[0, 3, 100],
|
|
// [0, 4, 100],
|
|
// [0, 5, 100],
|
|
// [0, 6, 200],
|
|
|
|
[1, 0, 120],
|
|
[1, 1, 120],
|
|
[1, 2, 125],
|
|
[1, 3, 120],
|
|
// [1, 4, 120],
|
|
// [1, 5, 120],
|
|
// [1, 6, 120],
|
|
|
|
[2, 0, 120],
|
|
[2, 1, 140],
|
|
[2, 2, 140],
|
|
[2, 3, 140],
|
|
// [2, 4, 140],
|
|
// [2, 5, 140],
|
|
// [2, 6, 140],
|
|
|
|
[3, 0, 200],
|
|
[3, 1, 200],
|
|
[3, 2, 200],
|
|
[3, 3, 200]
|
|
// [3, 4, 200],
|
|
// [3, 5, 200],
|
|
// [3, 6, 200],
|
|
|
|
// [4, 4, 300],
|
|
// [4, 5, 300],
|
|
// [4, 6, 300]
|
|
],
|
|
label: { show: true, color: '#fff' },
|
|
itemStyle: {
|
|
borderColor: 'rgba(255, 255, 255, 0.5)',
|
|
emphasis: { shadowBlur: 0, shadowColor: 'rgba(255, 255, 255, 0.5)' }
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
watch: {
|
|
list: {
|
|
handler(newVal) {
|
|
// this.odData = []
|
|
// console.log(newVal ,'1111111111');
|
|
// if (newVal) {
|
|
// newVal[newVal.length - 1].ob_data.forEach(ele => {
|
|
// ele.forEach(item => {
|
|
// this.odData.push([])
|
|
// })
|
|
// })
|
|
// }
|
|
// console.log(this.odData,'155');
|
|
this.drawThermalChart();
|
|
},
|
|
// immediate:true
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
|
|
</style>
|