当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts在地图上绘制散点图（任意点）

echarts在地图上绘制散点图（任意点）

2019年02月20日  | 移动技术网IT编程  | 我要评论

项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点

通过查询官网文档，找到一个与需求类似的demo：，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。

，一个盒子

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>mapscatter demo</title>
</head>
<body>
    <div id="echart" style="width: 1000px; height: 800px;"></div>

    <script src="./echarts.min.js"></script>
    <script src="./gansu.js"></script>
    <script src="./main.js"></script>
</body>
</html>

main.js

var dom = document.getelementbyid("container");
var mychart = echarts.init(dom);
option = null;
// 散点在地图上的坐标
var geocoordmap = {
    "国家级基地1": [94.12, 39.66],
    "国家级基地2": [97.20, 39.55],
    "国家级基地3": [95.28, 40.29],
    "省级基地1": [98.36, 40.19],
    "省级基地2": [97.88, 39.49],
    "省级基地3": [95.77, 40.59],
    "市级基地1": [102.66, 38.89],
    "市级基地2": [101.23, 37.79],
    "市级基地3": [99.40, 39.69]
};
// 将坐标与值对应并反映在地图上
var convertdata = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geocoord = geocoordmap[data[i].name];
        if (geocoord) {
            res.push({
                name: data[i].name,
                value: geocoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name;
        }
    },
    visualmap: {
        type: 'piecewise',
        textstyle: {
            color: '#fff'
        },
        pieces: [
            {min: 300, label: '国家级基地', color: '#e3bf4c'},
            {min: 200, max: 300, label: '省级基地', color: '#be4f51'},
            {min: 100, max: 200, label: '市级基地', color: '#60c2cc'}
        ],
        color: ['#e3bf4c', '#be4f51', '#60c2cc']
    },
    geo: {
        map: '甘肃',
        label: {
            emphasis: {
                show: false
            }
        },
        itemstyle: {
            normal: {
                areacolor: '#323c48',
                bordercolor: '#111'
            },
            emphasis: {
                areacolor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'effectscatter',
            coordinatesystem: 'geo',
            data: convertdata([
                {name: "国家级基地1", value: 110},
                {name: "国家级基地2", value: 110},
                {name: "国家级基地3", value: 110},
                {name: "省级基地1", value: 210},
                {name: "省级基地2", value: 210},
                {name: "省级基地3", value: 210},
                {name: "市级基地1", value: 310},
                {name: "市级基地2", value: 310},
                {name: "市级基地3", value: 310}
            ]),
            symbolsize: 12,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemstyle: {
                emphasis: {
                    bordercolor: '#fff',
                    borderwidth: 1
                }
            }
        }
    ]
};
if (option && typeof option === "object") {
    mychart.setoption(option, true);
}

最终效果

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网