<template>
    <!--热力图-->
    <div style="width: 100%; height: 100%;">
        <div :id="chartId" class="main"></div>
    </div>
</template>

<script>
export default {
    name: "hotMap_chart"
}
</script>

<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import worldJson from '@/assets/json/world.json';
import chineseWorldName from '@/assets/json/chineseWorldName.json';
import testJson from '@/assets/json/test.json'

let data = null

const props = defineProps({
    title: {
        type: String,
        default: '默认未知'
    }
})
const transformData = () => {
    data = testJson.data.map((item) => ({
        name: item.gridName,
        value: [
            item.vertex1Lon,
            item.vertex1Lat,
            item.vertex2Lon,
            item.vertex2Lat,
            item.vertex3Lon,
            item.vertex3Lat,
            item.vertex4Lon,
            item.vertex4Lat,
            item.vertex5Lon,
            item.vertex5Lat,
            item.vertex6Lon,
            item.vertex6Lat,
            Math.random() * 100,
        ],
    }));
    console.log('data', data)
}

transformData()

// 生成唯一的图表ID
const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
let myChart = null;

// 初始化图表
function initChart() {
    const chartDom = document.getElementById(chartId.value);
    chartDom.style.width = '100%';
    chartDom.style.height = '100%';

    if (!chartDom) return;
    echarts.registerMap("world", worldJson);
    myChart = echarts.init(chartDom);

    const option = {
        backgroundColor: '#000',

        // legend: {
        //     show: true,
        //     data: ['默认'],
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: 12
        //     },
        //     top: 0,
        //     left: '-5px',
        //     backgroundColor: 'transparent',
        //     borderColor: 'transparent',
        //     padding: [5, 10],
        //     // 添加图标样式控制
        //     icon: 'rect',  // 使用矩形图标
        //     itemWidth: 15, // 图例宽度
        //     itemHeight: 5, // 图例高度，设为较小值形成线条效果

        // },

        title: {
            text: props.title,
            // left: 'center',
            // top: 10,
            left: 6,
            textStyle: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
            }
        },
        geo: {
            map: "world",
            roam: true,
            center: [104, 35], // 中国中心
            zoom: 10, // 放大倍数
            // aspectScale: Math.cos((chRoughLatitude * Math.PI) / 180),
            // nameProperty: 'name_en', // If using en name.
            label: {
                show: true,
                textBorderColor: "#f7f7f7",
                textBorderWidth: 1,
            },
            itemStyle: {
                areaColor: "#163C7A", // 地图底色
                borderColor: "#2a6ea6", // 国界线
                borderWidth: 1,
            },
            emphasis: {
                itemStyle: {
                    areaColor: "#1f4e79", // 鼠标hover颜色
                },
            },
            nameMap: chineseWorldName
        },
        visualMap: {
            text: ["100", "10"],
            textStyle: {
                color: "#fff"
            },
            dimension: 12,
            itemWidth: 12,
            itemHeight: 68,
            left: "center", // 水平居中
            bottom: 1, // 距离底部 20px
            range: [1, 100],
            min: 1,
            max: 100,
            orient: "horizontal",
            inRange: {
                color: [
                    "#6ffcba",
                    "#409eff",
                    "#2e7dff",
                    "#97D5E4",

                    // "#f46d43",
                    // "#BF1C05",
                ],
            },
        },

        series: [
            {
                type: "custom",
                // name:'moren',
                coordinateSystem: "geo",
                //   emphasis: {
                //     style: {
                //       fill: "#ffcc00", // 高亮颜色
                //       opacity: 1,
                //     },
                //   },
                emphasis: {
                    focus: "self",
                },
                renderItem(params, api) {
                    // console.log("params", api.value(0));
                    const point1 = api.coord([api.value(0), api.value(1)]);
                    const point2 = api.coord([api.value(2), api.value(3)]);
                    const point3 = api.coord([api.value(4), api.value(5)]);
                    const point4 = api.coord([api.value(6), api.value(7)]);
                    const point5 = api.coord([api.value(8), api.value(9)]);
                    const point6 = api.coord([api.value(10), api.value(11)]);

                    const hex = [point1, point2, point3, point4, point5, point6];

                    return {
                        type: "polygon",
                        shape: {
                            points: hex,
                        },
                        style: {
                            fill: api.visual("color"),
                        },
                    };
                },
                data: data,
            }
        ]
    }

    myChart.setOption(option);
    resizeChart();
}

// 响应式调整图表大小
function resizeChart() {
    if (myChart) {
        myChart.resize();
    }
}

onMounted(async () => {
    // 确保DOM渲染完成后初始化图表
    nextTick(() => {
        initChart();
        window.addEventListener('resize', resizeChart);
    });
});

onUnmounted(() => {
    if (myChart) {
        window.removeEventListener('resize', resizeChart);
        myChart.dispose();
        myChart = null;
    }
});
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    /* min-height: 400px; */
    /* overflow: hidden; */
}
</style>