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

通过查询官网文档，找到一个与需求类似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。

index.html，一个盒子

<!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);

}

最终效果

echarts在地图上绘制散点图（任意点）的更多相关文章

  1. R语言绘图：在地图上绘制散点图

    使用ggplot2在地图上绘制散点图 ######*****绘制散点图代码*****####### options(baidumap.key = '**************') #设置密钥 bei ...

  2. 在echarts里在geojson绘制的地图上展示散点图（气泡）、线集。

    先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...

  3. iOS开发之在地图上绘制出你运行的轨迹

    首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPo ...

  4. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  5. 利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  6. R语言绘图：在地图上绘制热力图

    使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...

  7. 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

    实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

  8. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  9. vue中使用echarts，地图上的涟漪特效大小设置

    在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了

随机推荐

  1. SSH框架之Struts（3）——Struts的执行流程之核心方法

    上篇讲了Tomcat实例化一个单例的ActionServlet.依据web.xml配置文件做好对应的初始化工作. 这时client产生一个.do结尾的request请求,採用get/post方式提交之 ...

  2. Machine_learning--score

    辛苦了2个半月,终须学完了machine-learning watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hyaXN0cHJpbmNlMDA3/font ...

  3. HDU 5502

    枚举所有的最大值盒子里糖果为K的情况,对于位置p,dp[p]为p以前的,第p个操作为抽到不是蓝球里的情况,盒子里最多糖果为k的情况的概率.而到p这个位置,可以有连续最多k-1(因为第k个操作必须为抽到 ...

  4. Bag标签之删除书包中的一条数据

    删除书包中的一条数据 查询 <esql module=help id=list> Select ID,Subject,Writer,DayTime From Messages </e ...

  5. UINavigationController具体解释(一)

    @UINavigationControlle简单介绍: 1.导航控制器,专门管理控制器的控制器. 2.採用栈的方式管理全部controller,每一个controller管理各自的视图 @UINavi ...

  6. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...

  7. 【HDU 4870】Rating【DP】

    题意:一个人注冊两个账号,初始rating都是0,他每次拿低分的那个号去打比赛,赢了加50分,输了扣100分.胜率为p,他会打到直到一个号有1000分为止,问比赛场次的期望. 题解:因为每次添加分数或 ...

  8. AWS OpsWorks新增Amazon RDS支持

    AWS OpsWorks是一个应用管理服务. 你可以通过它把你的应用在一个 堆栈中定义成为不同层的集合.每一个堆栈提供了须要安装和配置的软件包信息,同一时候也能部署不论什么在OpsWorks层中定义的 ...

  9. Oracle GoldenGate从oracle db 到非oracle db的初始化数据同步的方法

    非oracle db以 sqlserver为样例说明: 我的思路 A :oracle db 生产  B: oracle db 中间机 C: sqlserver db 目的端 A-> B-> ...

  10. C 非标准库（conio.h）

    所谓的 C 标准库(C standard library),是指在 ISO C 或者 POSIX 标准中定义的: POSIX is a superset(超集) of the standard C l ...