IwishIcould
 //展示出这个点的地名(重点)
源地址 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
                }
            },
            

        }
    ]
}

 

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-11-17
  • 2021-11-17
  • 2021-10-03
  • 2022-12-23
  • 2021-08-07
  • 2021-12-16
  • 2021-11-19
猜你喜欢
  • 2021-10-22
  • 2021-11-17
  • 2021-06-22
  • 2021-06-11
  • 2021-12-24
  • 2022-12-23
相关资源
相似解决方案