echarts实现地图效果

最新推荐文章于 2025-04-23 17:13:03 发布

原创最新推荐文章于 2025-04-23 17:13:03 发布

· 179 阅读

0 ·

版权

文章标签：

#echarts #javascript #前端

通过echarts.min.js和china.js实现中国地图效果。

html代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>省份客户量实时监控</title>
    <link href="/js/map/index.css" rel="stylesheet" />
    <script src="/js/jquery/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="/js/map/echarts.min.js"></script>
    <script src="/js/map/china.js"></script>
    <script src="/js/map/center2.js?v=20250208"></script>
</head>
<body>
    <div id="title">全国客户分布分析</div>
    <div id="center2"></div>
</body>
</html>

index.css代码如下：

body {
    background: #333;
}

#title {
    position: absolute;
    z-index: 1;
    top: 40px;
    left: 0;
    width: 100%;
    height: 10%;
    letter-spacing: 2px;
    /* background: #555; */
    /* color: white; */
    color: yellow;
    /* font-size: 35px; */
    font-size: 18px;
    font-weight: bold;
    /* 弹性盒子布局 */
    display: flex;
    /* 水平剧中*/
    justify-content: center;
    /* 垂直居中*/
    align-items: center;
}

#center2 {
    position: absolute;
    width: 79%;
    height: 100%;
    top: 3%;
    left: 10%;
    background: #888;
}

center2.js代码如下：

// 初始化echart实例对象
var myChart = echarts.init(document.getElementById('center2'), 'dark');

// 指定图表的配置项和数据
var option = {
    /*backgroundColor: '#fff', // 设置整个地图容器的背景色*/
    grid: {
        left: '10%',   // 距离容器左侧的距离
        right: '10%',  // 距离容器右侧的距离
        top: '10%',    // 距离容器顶部的距离
        bottom: '10%'  // 距离容器底部的距离
    },
    title: {
        text: '',
        textStyle: {
            color: 'gold',
            fontStyle: 'normal',

        },
        left: 'center',
        top: '0px'

    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: { // 左侧小导航图标
        show: true,
        x: 'left',
        y: 'bottom',
        top: '75%',
        left: '22%',
        textStyle: {
            fontSize: 8,
        },
        //calculable: true,
        //inRange: {
        //    color: [ '#F9DCD1', '#F2AD92', '#E55B25', '#C64918','#8A3310']
        //},
        splitList: [{
                start: 1,
                end: 9
            },
            {
                start: 10,
                end: 99
            },
            {
                start: 100,
                end: 999
            },
            {
                start: 1000,
                end: 9999
            },
            {
                start: 10000
            }
        ],
        color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
    },
    series: [{
        name: '客户量',
        type: 'map',
        mapType: 'china',
        roam: false, // 禁用拖动和缩放
        itemStyle: { // 图形样式
            normal: {
                borderWidth: .5, //区域边框宽度
                borderColor: '#009fe8', //区域边框颜色
                areaColor: "#ffefd5", //区域颜色
            },
            emphasis: { // 鼠标滑过地图高亮的相关设置
                borderWidth: .5,
                borderColor: '#4b0082',
                areaColor: "#fff",
            }
        },
        label: { // 图形上的文本标签
            normal: {
                show: true, //省份名称
                fontSize: 10,
            },
            emphasis: {
                show: true,
                fontSize: 10,
            }
        },
        data: [] /*{'name': '上海','value': 318}, {'name': '云南','value': 162}*/
    }]
};

$(document).ready(function () {
    // 初始化数据
    bindData();

    // 获取省份数据并绑定-地图
    function bindData() {
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:html
            url: '/tools/admin_ajax.ashx?action=GetProvinceCustomersNum', //目标地址
            data: {},
            async: false,
            success: function (data) {
                if (data != null) {
                    $.each(data, function (i, val) {
                        var province = val.Name.replace('省', '').replace('壮族自治区', '').replace('回族自治区', '').replace('维吾尔自治区', '').replace('自治区', '');
                        option.series[0].data.push({
                            'name': province,
                            'value': val.CusNum
                        })
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                return false;
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


});

效果如下：