生成毕业同学去向数据地图，鼠标经过某个省是变色而且显示相关的信息（比如那些人在这个省）

最新推荐文章于 2022-07-06 10:58:01 发布

中南自动化学院至渝

最新推荐文章于 2022-07-06 10:58:01 发布

阅读量2w

点赞数 3

分类专栏： HTMLCssJs

转载无需询问，注明原出处即可

本文链接：https://blog.csdn.net/qq_43657442/article/details/116720516

版权

HTMLCssJs 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的地图数据展示案例，通过HTML和JavaScript代码实现了不同省份的数据展示及鼠标悬停显示详细信息的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #333333;
        }

        body {
            font-family: "微软雅黑";
        }

        #charts {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="charts"></div>
</body>

<script src="echarts-all2.js"></script>
<script>
    var detail = [
        { ren: "长沙：xxx、xxx、xxx" },
        { ren: "西安：xxx" },
        { ren: "昆明：xxx、xxx、xxx、xxx、 <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx、xxx、xxx、 <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx、xxx、<br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、  xxx、xxx <br> 威信：xxx <br> 昭通：xxx <br> 曲靖：xxx" },
        { ren: "毕节赫章：xxx  <br> 贵阳南明：xxx" },
        { ren: "&nbsp; &nbsp; &nbsp;杭州：&nbsp; &nbsp;  &nbsp;xxx  <br> 衢（qú）州：xxx" },
        { ren: "洛阳：xxx" },
        { ren: "上海闵行：xxx  <br> 上海浦东：xxx  <br>上海杨浦：xxx、xxx" },
        { ren: "深圳：xxx、xxx、xxx" },
        { ren: "成都：&nbsp;  &nbsp; xxx、xxx、xxx、  <br> &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; xxx、xxx <br> 攀枝花：xxx" },
        { ren: "天津：xxx" },
        { ren: "重庆：xxx、xxx" },

    ];
    var mycharts = echarts.init(document.getElementById('charts'))
    option = {
        dataRange: {
            show: false,
            x: 'left',
            y: 'bottom',
            splitList: [
                { start: 5, end: 5, color: 'orange' },//当值为5时，区域背景
                { start: 10, end: 10, color: '#ff6300' },//当值为10时，区域背景
                { start: 15, end: 15, color: '#ccc' },//当值为15时，区域背景
            ],
        },
        tooltip: {
            alwaysShowContent: true,
            enterable: true,
            formatter: function (params) {
                var name = params.name;
                var goaltext = "none";
                if (name == "湖南") {
                    goaltext = detail[0].ren;
                } else if (name == "陕西") {
                    goaltext = detail[1].ren;
                }
                else if (name == "云南") {
                    goaltext = detail[2].ren;
                }
                else if (name == "贵州") {
                    goaltext = detail[3].ren;
                }
                else if (name == "浙江") {
                    goaltext = detail[4].ren;
                }
                else if (name == "河南") {
                    goaltext = detail[5].ren;
                }
                else if (name == "上海") {
                    goaltext = detail[6].ren;
                }
                else if (name == "广东") {
                    goaltext = detail[7].ren;
                }
                else if (name == "四川") {
                    goaltext = detail[8].ren;
                }
                else if (name == "天津") {
                    goaltext = detail[9].ren;
                }
                else if (name == "重庆") {
                    goaltext = detail[10].ren;
                }
                else {
                    goaltext = "none";
                }

                return goaltext;
            }
        },
        series: [
            {
                name: '',
                type: 'map',
                mapType: 'china',
                //hoverable: false,
                roam: false,
                itemStyle: {
                    normal: { label: { show: true } },
                    emphasis: { label: { show: false } }
                },
                data: [],
            }
        ],
        animation: false

    };
    var ini_data = [];//初始化省份数组



    /*要那些省就在这儿改*/
    var provArr = ['贵州', '河南', '云南', '浙江', '上海', '湖南', '广东', '四川', '天津', '重庆', '陕西'];//获取的省份，有可能是从后台获取


    //正则省份，将省与市的字眼去掉，框架不识别
    for (var i = 0; i < provArr.length; i++) {
        var str = provArr[i];
        var re = /省|市/g;  //全局匹配
        var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
        ini_data.push(str2);
    }
    option.series[0].data = ini_data;//将拼接好的数组赋给参数集合
    mycharts.setOption(option);//跟新图表
    //鼠标滑过事件
    var testStr = ',' + provArr.join(",") + ",";
    mycharts.on('hover', function (param) {
        // console.log(param);
        if (testStr.indexOf("," + param.name + ",") != -1) {
            return false;
        } else {
            param.value = 15;
            mycharts.setOption(option);
        }
    });
    //初始化省颜色
    function ini_province() {
        var ini_len = option.series[0].data.length;
        for (var i = 0; i < ini_len; i++) {
            //初始化颜色
            option.series[0].data[i].value = 5;
            mycharts.setOption(option);
        }
    }
</script>

</html>