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"
 
let myChart: any = null
const randomData = () => {
    var 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
var 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
var 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 },
];



var convertData = function (data: any) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var 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: ['#0e2a3f'],
        }
    },

    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>