• 在地图上--给经纬度--展示任何一个点(可以展示地名)


     //展示出这个点的地名(重点)
    源地址 https://www.echartsjs.com/gallery/editor.html?c=scatter-map
    var geoCoordMap = {
        "海门":[121.15,31.89],
        "鄂尔多斯":[109.781327,39.608266],
        "岳阳":[113.09,29.37],
        "长沙":[113,28.21],
        "衢州":[118.88,28.97],
        "廊坊":[116.7,39.53],
        "菏泽":[115.480656,35.23375],
        "合肥":[117.27,31.86],
        "武汉":[114.31,30.52],
        "大庆":[125.03,46.58]
    };
    
    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 = {
        backgroundColor: '#404a59',
        title: {
            text: '全国主要城市空气质量',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            x:'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name;
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['pm2.5'],
            textStyle: {
                color: '#fff'
            }
        },
    
    //visualMap 是视觉映射组件 控制图元  小圆点
    //ymbol: 图元的图形类别。   symbolSize: 图元的大小。  color: 图元的颜色。  
    //opacity: 图元以及其附属物(如文字标签)的透明度。
    
    
        visualMap: {
            min: 0,
            max: 200,
            calculable: true,
            inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
                color: '#fff'  //hover上去  字体的颜色
            }
        },
    
     //geo地理坐标系组件  支持在地理坐标系上绘制散点图,线集。
     
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false  //光标放在未显示地名的区域      是否显示该地名    true显示  false不显示
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [
            {
                name: 'pm2.5',
                type: 'scatter',
                color:"yellow",//更改小圆点的颜色
                coordinateSystem: 'geo',
                data: convertData([
                    {name: "海门"},
                    {name: "鄂尔多斯"},
                    {name: "大庆"},
                 
                ]),
                
              symbolSize: 12,//控制小圆点的大小
                
                //展示出这个点的地名(重点)
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'bottom',
                        color: '#fff',
                        show: true
                    }
                },
                
    
            }
        ]
    }

  • 相关阅读:
    RPC框架实践之:Apache Thrift
    ubuntu中安装hadoop集群
    前端开发浏览器兼容问题
    3亿(int)数据-2亿(int)数据 求差集
    mvn docker 部署 每次都需要下载包的问题
    树莓派操作记录
    mysql 实现类似开窗函数的功能
    mysql 多字段更新
    go proxy转发工作中碰到的问题
    之前项目使用的轻量的goweb框架
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11449385.html
Copyright © 2020-2023  润新知