BigScreenUI/src/components/echartsCom/CloudWords.vue

<template>
    <div style="width: 100%; height: 100%" id="cludWordEchart"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import jsonData from "./jsonData/china.json"
import { defineProps } from 'vue'

// 接收父组件传递的参数
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
console.log("props--->", props.data)
 
let myChart: any = null
const randomData = () => {
    let a = Math.random();
    if (a > 0 && a <= 0.333)
        return 0;
    if (a > 0.333 && a <= 0.666)
        return 90;
    return -90;
}

const colorData = (value: any) => {
    let colorData = []
    if (value > 500) {
        colorData = ["#FB6716", "bold", "黑体"];
    } else if (value > 450 && value <= 500) {
        colorData = ["#62ECFE", "bold", "黑体"];
    } else if (value > 400 && value <= 450) {
        colorData = ["#FF8F00", "bold", "黑体"];
    } else if (value > 350 && value <= 400) {
        colorData = ["#3773FF", "bold", "黑体"];
    } else if (value > 300 && value <= 350) {
        colorData = ['rgba(#62ECFE,0.6)', "normal", "黑体"];
    } else if (value > 250 && value <= 300) {
        colorData = ['rgba(#FF8F00,0.6)', "normal", "黑体"];
    } else if (value > 200 && value <= 250) {
        colorData = ['rgba(#3773FF,0.6)', "normal", "黑体"];
    }else{
        colorData = ["#fff", "normal", "黑体"];
    }
    return colorData
}

//110  35  14/18
// let geoCoordMap: any = {
//     "挖掘机": [108.99, 36.04],
//     "洒水车": [113.53, 44.3],
//     "牵引车": [106.21, 27.35],
//     "平地机": [95.61, 44.57],
//     "应用支撑": [104.58, 39.69],
//     "掘地机": [101.39, 47.5],
//     "自卸车": [97.53, 31.89],
//     "叉车": [112.46, 31.65],
//     "开钩机": [92.65, 36.0],
//     "数据基础": [122.15, 32.99],
//     "其他设备": [123.89, 40.34],

// };

//0-500
// let data = [
//     { name: "挖掘机", value: 501 },
//     { name: "洒水车", value: 400 },
//     { name: "牵引车", value: 460 },
//     { name: "平地机", value: 300 },
//     { name: "应用支撑", value: 360 },
//     { name: "掘地机", value: 460 },
//     { name: "自卸车", value: 330 },
//     { name: "叉车", value: 210 },
//     { name: "开钩机", value: 200 },
//     { name: "数据基础", value: 440 },
//     { name: "其他设备", value: 240 },
// ];

// 先过滤name相同的, 然后再截取11个
const data: any = props.data.filter((item: any, index: any, self: any) => {
    return self.findIndex((s: any) => s.name === item.name) === index
}).slice(0, 11)

// console.log("data--->", data)

const coordinates = [
    [108.99, 36.04],
    [113.53, 44.3],
    [106.21, 27.35],
    [95.61, 44.57],
    [104.58, 39.69],
    [101.39, 47.5],
    [97.53, 31.89],
    [112.46, 31.65],
    [92.65, 36.0],
    [122.15, 32.99],
    [123.89, 40.34],
];

const geoCoordMap: any = {}

for (let i = 0; i < data.length; i++) {
    geoCoordMap[data[i].name] = coordinates[i]
}
// console.log("geoCoordMap--->", geoCoordMap)



const convertData = function (data: any) {
    let res = [];
    for (let i = 0; i < data.length; i++) {
        let geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                label: {
                    normal: {
                        color: colorData(data[i].value)[0],
                        fontSize: data[i].value / 40 + 6,
                        fontWeight: colorData(data[i].value)[1],
                        fontFamily: colorData(data[i].value)[2],
                        //rotate: randomData(),
                    },
                },
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};

const option: any = {
    title: {
        text: '热力图',
        left: 'center',
        textStyle: {
            color: '#fff'
        },
        show: false
    },
    visualMap: {
        type: "continuous",
        show: false,
        calculable: true,
        min: 0,
        max: 500,
        inRange: {
            color: ['#3773FF', '#FF8F00', '#FB6716']
        }
    },

    backgroundColor: '#0e2a3f',
    geo: {
        center: [106, 36],
        zoom: 1.5,
        silent: true,
        map: 'china',
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#0e2a3f',
                borderColor: '#0e2a3f'
            },
        }
    },
    series: [{
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: 0.1,
        label: {
            normal: {
                formatter: '{b}',
                position: 'inside',
                show: true,
            },
            emphasis: {
                show: true,
            }
        },
    }, {
        name: 'AQI',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: convertData(data),
        blurSize: 100,
        minOpacity: 0.03,
        maxOpacity: 0.9,
    },

    ]
};
onMounted(() => {
    echarts.registerMap('china', jsonData)
    const lineEchartDomEl = document.getElementById("cludWordEchart");
    myChart = echarts.init(lineEchartDomEl);
    myChart.setOption(option);

})

</script>

<style scoped></style>