<!-- <template>
    <热力图
    <div style="height: 100%;background-color: blueviolet;" >
        <div  style="width: 100%;height: 100%;">
            <div class="main">
                我是hotMap
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "hotMap_chart"

}
</script>
<script setup> 
// import { onMounted, onBeforeUnmount, computed, ref, reactive, nextTick, markRaw, watch } from "vue";
// import * as echarts from 'echarts';
// import { getLanguage, setLanguage } from '@/utils/auth'
// import visualApi from "../../../api/move/visual.js";
// const ChineseEnglishGlossary = ref({
//     "前向分布": "Forward links availability",
//     "反向分布": "Backward links availability",
//     "Forward links availability": "Forward links availability",
//     "Backward links availability": "Backward links availability"

// })
// const props = defineProps({
//     componentProps: {
//         type: Object,
//         default: () => { }
//     },
//     time: {
//         type: String,
//         default: () => ''
//     },
//     eight: {
//         type: Boolean,
//         default: () => true
//     },
//     dataType: {
//         type: Number,
//         default: () => 0
//     },
//     tableObj: {
//         type: Object,
//         default: () => { }
//     }
// })
// const timeIntal = ref(true)
// var watchList = []
// const watch1 = watch(() => props.time, (newVal) => {
//     if (selectStatus.value) {
//         // console.log(objs.value[newVal], newVal);
//         selectId.value = newVal
//         if (timeIntal.value) {
//             timeIntal.value = false
//             setTimeout(() => {
//                 if (objs.value[newVal] && objs.value[newVal] != 'undefined') {
//                     planFn(objs.value[newVal], xName.value, yName.value, props.componentProps)
//                 }
//                 timeIntal.value = true
//             }, 500);
//         }
//     }
//     if (props.componentProps.dataType && props.componentProps.dataType == 1) {
//         propsFn(props.componentProps)
//     }
// })
// watchList.push(watch1)
// const watch2 = watch(() => props.tableObj.update, (newVal) => {
//     if (newVal) {
//         if (myChart) {
//             propsFn(props.componentProps)
//             myChart.resize()
//         }
//     }
// })
// watchList.push(watch2)
// var pieces1 = [
//     { min: 0, max: 0, label: '0', color: '#ffffff' },
//     { min: 1, max: 0, label: '1', color: '#72EFDD' },
//     { min: 2, max: 2, label: '2', color: '#56CFE1' },
//     { min: 3, max: 3, label: '3', color: '#4EA8DE' },
//     // { min: 3, max: 10000000000, label: '≥3', color: '#BE5C37' }
//     { min: 3, max: 10000000000, label: '≥4', color: '#5E60CE' }
// ]
// var pieces2 = [
//     { min: 0, max: 0.6, label: '0.0 - 0.6', color: '#FFFFFF' },
//     { min: 0.6, max: 0.8, label: '0.6 - 0.8', color: '#72EFDD' },
//     { min: 0.8, max: 0.95, label: '0.8 - 0.95', color: '#56CFE1' },
//     { min: 0.95, max: 0.99, label: '0.95 - 0.99', color: '#4EA8DE' },
//     { min: 0.99, max: 0.997, label: '0.99 - 0.997', color: '#5E60CE' },
//     { min: 0.997, max: 1, label: '0.997 - 1.0', color: '#7400B8' },
// ]
// var arr = []
// const planFn = (data, x, y, obj) => {
//     var mappedData = data.map(function (item) {
//         return { name: item[x], value: item[y[0].name] };
//     });

//     // 获取字段'value'的最大值
//     const maxValue = mappedData.reduce((max, item) => Math.max(max, item.value), -Infinity);
//     // 获取字段'value'的最小值
//     const minValue = mappedData.reduce((min, item) => Math.min(min, item.value), Infinity);

//     console.log(mappedData, '热力图数据');
//     chartDom = document.getElementById(obj.id);
//     myChart = echarts.init(chartDom);
//     option = {
//         title: {
//             text: props.eight ? obj.columnLabel : '',
//             left: 'center',
//             textStyle: {
//                 color: '#ccc', // 设置标题颜色为灰色
//                 fonSize: 1
//             }
//         },
//         tooltip: {
//             trigger: 'item',
//             showDelay: 0,
//             transitionDuration: 0.2,
//             // textStyle: {
//             //     color: '#ff0000' // 这里设置鼠标悬浮时的文字颜色为红色
//             // }
//         },
//         visualMap: {
//             type: 'piecewise',
//             left: 'right',
//             top: 'bottom',
//             calculable: true,
//             realtime: false,
//             // splitNumber: 6,
//             formatter: function (a, b) {
//                 console.log(a, b, '问题');
//                 // 将数值转换为整数并格式化输出
//                 return `${Number(a).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} - ${Number(b).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
//             },
//             label: '测试',
//             pieces: obj.pieces == 1 ? pieces1 : pieces2,
//             min: minValue - 1,
//             max: maxValue,
//             textStyle: {
//                 color: '#ffffff' // 这里设置颜色选择器文字的颜色
//             },
//             // range: [0, 1000],
//             inRange: {
//                 color: [
//                     '#ffffbf',
//                     '#fee090',
//                     '#DBBF92',
//                     '#D78851',
//                     '#BE5C37',
//                 ]
//             },
//             // outOfRange: {
//             //     color: ['#fdae61',
//             //         '#f46d43',
//             //         '#d73027',
//             //         '#a50026'
//             //     ]
//             // },
//             // color: ['#d94e5d', '#eac736', '#50a3ba'],
//             // calculable: true,
//             // piecewise: true,
//         },
//         // visualMap: {
//         //     min: 0,
//         //     max: 1000,
//         //     orient: 'vertical',
//         //     left: 'left',
//         //     top: 'bottom',
//         //     color: ['#d94e5d', '#eac736', '#50a3ba'],
//         //     calculable: true,
//         //     piecewise: true
//         // },
//         series: [
//             {
//                 name: obj.columnLabel,
//                 type: 'map',
//                 roam: true,
//                 map: obj.id,
//                 data: mappedData,
//                 emphasis: {
//                     label: {
//                         show: false
//                     },
//                     itemStyle: {
//                         // 鼠标悬浮时的样式
//                         // borderColor: 'red', // 鼠标悬停时边框颜色
//                         // borderWidth: 2,
//                         color: '#000000' // 鼠标悬停时内部填充颜色
//                     }
//                 },
//                 zoom: 1.3,
//                 itemStyle: {
//                     // borderWidth: 2, // 边框宽度
//                     // borderColor: '#000000', // 边框颜色
//                     // color: '#ffffff',
//                     // normal: { // 正常状态下的样式
//                     //     color: function (params) {
//                     //         // 定义颜色的逻辑
//                     //         return '#ffffff';
//                     //     }
//                     // },
//                     // emphasis: { // 高亮状态下的样式
//                     //     color: function (params) {
//                     //         // 鼠标悬停时的颜色逻辑
//                     //         return 'red'; // 或者一个新的颜色值
//                     //     }
//                     // }
//                 }
//                 // 使用encode来映射数据源的属性到热力图的x轴、y轴和值
//                 // encode: {
//                 //     x: a,   // 将x轴映射到city属性
//                 //     y: 'hour',   // 将y轴映射到hour属性
//                 //     value: b // 将值映射到value属性
//                 // },
//                 // data: value.visualData,
//                 // // 维度标签
//                 // dimensionNames: dimension,
//                 // // 指标名称
//                 // metric: metrics
//             }
//         ]
//     };
//      console.log(option, '------------------------65--');
//     window.addEventListener("resize", function () {
//         if (myChart) {
//             var time = setInterval(() => {
//                 myChart.resize()
//             }, 200);
//             setTimeout(() => {
//                 clearInterval(time)
//             }, 2000)
//         }
//     })


//     if (getLanguage() == "english") {

//         Object.entries(props.componentProps).forEach(([key, value]) => {
//             console.log(key, value, 'key, --------------------value', ChineseEnglishGlossary.value[value]);

//             if (key === "columnLabel") {
//                 console.log(key, value, 'key, -------123-------------value');
//                 props.componentProps[key] = ChineseEnglishGlossary.value[value]

//             }


//         })
//         // console.log(props.componentProps, '柱状图---asdaaaa-----784654------');
//     }
//     console.log(option, '------------------------65--');
//     option && myChart.setOption(option);
// }

// function groupBy(array, key) {
//     return array.reduce((acc, item) => {
//         // 使用对象的键来存储分组
//         const groupKey = item[key];
//         // 如果累加器中还没有这个键的分组，就初始化一个空数组
//         if (!acc[groupKey]) {
//             acc[groupKey] = [];
//         }
//         // 将当前项添加到对应分组的数组中
//         acc[groupKey].push(item);
//         return acc;
//     }, {});
// }
// const propsFn = (value) => {
//     if (value.visualData && value.visualData.length > 0) {
//         // console.log(props.componentProps.columnName, '热力图加载了几次?');
//         echarts.registerMap(props.componentProps.id, props.componentProps.relitu);
//         // planFn(props.componentProps)
//         yName.value = []
//         value.metrics.forEach(it => {
//             yName.value.push({
//                 name: it.name,
//                 label: it.label
//             })
//         })
//         if (value.dimensions.length > 1) {
//             xName.value = value.dimensions[1].name
//             objs.value = groupBy(value.visualData, value.dimensions[0].name)
//             if (!selectId.value) {
//                 selectId.value = value.visualData[0][value.dimensions[0].name]//赋值初始化id
//             }
//             selectStatus.value = true
//             planFn(objs.value[selectId.value], xName.value, yName.value, value)
//         } else {
//             xName.value = value.dimensions[0].name
//             planFn(value.visualData, xName.value, yName.value, value)
//         }
//     }
// }
// const xName = ref('')
// const yName = ref([])
// const selectId = ref('')
// const objs = ref({})
// const selectStatus = ref(false)
// var option;
// var myChart
// var chartDom
// onMounted(() => {
//     propsFn(props.componentProps)
// })
// onBeforeUnmount(() => {
//     watchList.forEach(stop => stop())
//     watchList.length = 0 // 清空数组
//     if (myChart) {
//         myChart.clear()
//     }
// })
// </script>
// <style scoped>


// .main {
//     width: 100%;
//     height: 100%;

//     overflow: hidden;
   
//     border: 1px solid #3A4C5B;

// }
// </style> >-->

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

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

<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref } from 'vue';

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

// 生成六边形热力图数据
function generateHexagonData() {
    // 模拟巴西地图形状的六边形网格数据
    const data = [];
    const centerX = 0;
    const centerY = 0;
    
    // 六边形排列参数
    const radius = 15;
    const startRadius = 10;
    const endRadius = 40;
    const angleStep = Math.PI / 3; // 60度
    
    // 生成类似巴西地图轮廓的六边形点
    for (let r = startRadius; r < endRadius; r += radius * 0.85) {
        // 根据半径调整角度数量，形成不规则形状
        const angleCount = Math.round(8 - r/10) + Math.floor(Math.random() * 2);
        
        for (let i = 0; i < angleCount; i++) {
            // 基础角度，添加偏移使形状更接近巴西地图
            const baseAngle = angleStep * i;
            let angleOffset = 0;
            
            // 根据位置添加偏移，形成不规则形状
            if (r < startRadius + 15) angleOffset = 0.3;
            else if (r > endRadius - 15) angleOffset = -0.2;
            else if (i > angleCount/2) angleOffset = 0.1;
            
            const angle = baseAngle + angleOffset;
            
            // 计算坐标
            const x = centerX + r * Math.cos(angle);
            const y = centerY + r * Math.sin(angle);
            
            // 根据位置生成不同的值（模拟容量）
            let value;
            // 左侧区域值较低（蓝色）
            if (x < -10) {
                value = Math.random() * 30;
            } 
            // 右侧区域值较高（红色）
            else if (x > 20) {
                value = 70 + Math.random() * 30;
            } 
            // 中间区域值中等（黄、绿）
            else {
                value = 30 + Math.random() * 40;
            }
            
            data.push({
                value: [x, y, value],
                itemStyle: {
                    opacity: 0.9
                }
            });
        }
    }
    
    // 添加东南部突出部分（类似巴西东南角）
    for (let i = 0; i < 5; i++) {
        const angle = -Math.PI/4 + i * angleStep/2;
        const r = endRadius - 5 + i * 3;
        const x = centerX + r * Math.cos(angle);
        const y = centerY + r * Math.sin(angle);
        
        data.push({
            value: [x, y, 80 + Math.random() * 20],
            itemStyle: {
                opacity: 0.9
            }
        });
    }
    
    return data;
}

// 初始化图表
function initChart() {
    const chartDom = document.getElementById(chartId.value);
    chartDom.style.width = '100%';
    chartDom.style.height = '150px';
   
    if (!chartDom) return;
    
    myChart = echarts.init(chartDom);
    
    // 生成热力图数据
    const data = generateHexagonData();
    
    const option = {
        backgroundColor: '#000',
        title: {
            text: '链路层容量',
            left: 'center',
            // top: 10,
            textStyle: {
                color: '#fff',
                fontSize: 10,
                fontWeight: 'normal'
            }
        },
        tooltip: {
            formatter: function(params) {
                return `容量: ${params.data[2].toFixed(1)}`;
            },
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: '#444',
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            // bottom: 30,
            inRange: {
                color: ['#0050b3', '#1890ff', '#7cb305', '#ffd500', '#ff4d4f']
            },
            textStyle: {
                color: '#fff'
            },
            // itemWidth: 40,
            // itemHeight: 10,
            borderWidth: 0
        },
        xAxis: {
            type: 'value',
            show: false,
            min: -50,
            max: 50
        },
        yAxis: {
            type: 'value',
            show: false,
            min: -50,
            max: 50
        },
        series: [{
            name: '链路容量',
            type: 'scatter',
            coordinateSystem: 'cartesian2d',
            symbol: 'path://M0,-10 L10,5 L10,15 L0,20 L-10,15 L-10,5 Z', // 六边形路径
            symbolSize: [15, 15], // 六边形大小
            data: data,
            label: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

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

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

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

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>