<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>
