echart 地图地图上的点静态markPoint，动态markPoint

最新推荐文章于 2024-07-30 17:42:10 发布

chenxiaodan_danny

最新推荐文章于 2024-07-30 17:42:10 发布

阅读量4.2w

点赞数 2

分类专栏： JS 工具

本文链接：https://blog.csdn.net/chenxiaodan_danny/article/details/39080877

版权

工具同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

 	myChart = echarts.init(document.getElementById('mainChart'));
        var option;
        option = {
        	    title : {
        	        text: '全国主要城市空气质量（pm2.5）',
        	        subtext: 'data from PM25.in',
        	        sublink: 'http://www.pm25.in',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item'
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        x:'left',
        	        data:['pm2.5']
        	    },
        	    dataRange: {
        	        min : 0,
        	        max : 500,
        	        calculable : true,
        	        color: ['maroon','purple','red','orange','yellow','lightgreen']
        	    },
        	    toolbox: {
        	        show : true,
        	        orient : 'vertical',
        	        x: 'right',
        	        y: 'center',
        	        feature : {
        	            mark : {show: true},
        	            dataView : {show: true, readOnly: false},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    series : [
        	        {
        	            name: 'pm2.5',
        	            type: 'map',
        	            mapType: 'china',
        	            hoverable: false,
        	            roam:true,
        	            data : [],
        	            markPoint : {//数据全是markPoint
        	                symbolSize: 20,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
        	                itemStyle: {
        	                    normal: {
        	                        borderColor: '#87cefa',
        	                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
        	                        label: {
        	                            show: false
        	                        }
        	                    },
        	                    emphasis: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 5,
        	                        label: {
        	                            show: false
        	                        }
        	                    }
        	                },
        	                effect : {
        	                    show: true,
        	                    shadowBlur : 0
        	                },
        	                data : [
        	                    {name: "海门", value: 9},
        	                    {name: "鄂尔多斯", value: 12},
        	                ],

```````````````````````````````geoCoord: {
                ```````````````"海门":[121.15,31.89],
                ````````````````"鄂尔多斯":[109.781327,39.608266]

                               }
        	            },//end markPoint
        	           
        	        }//end series[0],
        	        ,
        	        {
        	            name: 'top5',
        	            type: 'map',
        	            mapType: 'china',
        	            hoverable: false,
        	            roam:true,
        	            data : [],
        	            markPoint : {//数据全是markPoint
        	                symbolSize: 20,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
        	                itemStyle: {
        	                    normal: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
        	                        label: {
        	                            show: false
        	                        }
        	                    },
        	                    emphasis: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 5,
        	                        label: {
        	                            show: false
        	                        }
        	                    }
        	                },
        	                effect : {
        	                    show: true,
        	                    shadowBlur : 0
        	                },
        	                data : [
        	                    {name: "海门", value: 9},
        	                    {name: "鄂尔多斯", value: 12},
        	                ]
        	            },//end markPoint
        	           
        	        }//end series[0]
        	    ]
      
        	};
        	    
        	                    
    	myChart.setOption(option);

注意：geoCoord可放在series里的任意位置，只要有一个就好

1.动态闪点，由markPoint的以下语句实现：

effect : {
show: true,
shadowBlur : 0
},