203 lines
6.2 KiB
Vue
203 lines
6.2 KiB
Vue
<template>
|
|
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'thermalChart', //热点图组件
|
|
data() {
|
|
return {
|
|
thermalChartData: []
|
|
};
|
|
},
|
|
created() {},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
pageType: {
|
|
type: String
|
|
},
|
|
title: {
|
|
type: String
|
|
}
|
|
// status: {
|
|
// type: String
|
|
// },
|
|
// componentName: {
|
|
// type: String
|
|
// },
|
|
},
|
|
methods: {
|
|
//处理od组件数据
|
|
ODhanlde(odData) {
|
|
// console.log(odData,'oddata');
|
|
// var odData = this.odData
|
|
var chartData = [];
|
|
var start = [];
|
|
if (odData && odData.length > 0) {
|
|
for (let i = 0; i < odData.length; i++) {
|
|
let item = odData[i].data;
|
|
if (item && item.length > 0) {
|
|
for (let j = 0; j < item.length; j++) {
|
|
start.push(item[j].start);
|
|
// 数组去重
|
|
|
|
// od图的数据
|
|
chartData.push([i, j, item[j].quantity]);
|
|
// console.log([i,j,item[j].val]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// this.thermalChartData = chartData
|
|
// console.log(chartData,'处理过后的odssssssssssssss');
|
|
return chartData;
|
|
// console.log(chartData, this.unique(start), 'od图的数据');
|
|
},
|
|
//数组去重
|
|
unique(arr) {
|
|
let newArr = [];
|
|
arr.forEach((item) => {
|
|
return newArr.includes(item) ? '' : newArr.push(item);
|
|
});
|
|
return newArr;
|
|
},
|
|
isObject(variable) {
|
|
return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
|
|
},
|
|
// 绘制热力图
|
|
drawThermalChart(odData, startEnd) {
|
|
let startEndStart = [],
|
|
startEndEnd = [];
|
|
if (this.isObject(startEnd)) {
|
|
if (startEnd.start) {
|
|
startEndStart = startEnd.start.split(',');
|
|
}
|
|
if (startEnd.start) {
|
|
startEndEnd = startEnd.end.split(',');
|
|
}
|
|
}
|
|
let myChart = this.$echarts.init(this.$refs.thermalChart);
|
|
let option = {
|
|
dataZoom: [
|
|
{
|
|
id: 'dataZoomY',
|
|
type: 'slider',
|
|
yAxisIndex: [0],
|
|
startValue: 0,
|
|
endValue: 10,
|
|
filterMode: 'empty'
|
|
}
|
|
],
|
|
tooltip: {
|
|
position: 'top'
|
|
// formatter: function (params) {
|
|
// return (
|
|
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
|
// );
|
|
// },
|
|
},
|
|
animation: false,
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: startEndStart,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
// name: "镇街",
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: startEndEnd,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
// name: "",
|
|
},
|
|
visualMap: {
|
|
min: 1,
|
|
max: 50,
|
|
calculable: true,
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
bottom: '1%',
|
|
text: ['50', '1'], // 文本，默认为数值文本
|
|
//color:['#20a0ff','#D2EDFF'],
|
|
calculable: false,
|
|
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
|
},
|
|
series: [
|
|
{
|
|
name: 'OD图',
|
|
type: 'heatmap',
|
|
data: this.ODhanlde(odData),
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (myChart) {
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
// this.$nextTick(() => {
|
|
// myChart.setOption(option)
|
|
// myChart.resize();
|
|
// })
|
|
}
|
|
},
|
|
mounted() {
|
|
// if (this.list) {
|
|
// this.drawThermalChart()
|
|
// }
|
|
this.drawThermalChart()
|
|
},
|
|
watch: {}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.a{
|
|
color: rgba(120, 0, 0, 0.5);
|
|
}
|
|
</style>
|