echars山东地图

实现在山东地图上使用经纬度标注水波纹点。

1.引入js

<script type="text/javascript" src="<%=path%>/skin/jquery.js"></script> 
<script type="text/javascript" src="<%=path%>/skin/echarts4.1.0.js"></script>
<script type="text/javascript" src="<%=path%>/skin/js/shandong.js"></script>

2.html定义dom

<div style="width:200px;height:200px" id="sdmap"></div>

3.map

var dom = document.getElementById("sdmap");
var myChart = echarts.init(dom);

window.addEventListener('resize', function () {myChart.resize()})
var option = null;
// 散点在地图上的坐标
var geoCoordMap = {
    "滨州数字经济产业园":[117.63,37.45],
    "滨州跨境电商产业园":[118.03,37.55],
    "德州跨境电商产业园":[116.29,37.25]
};
// 将坐标与值对应并反映在地图上
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;
};

var option = {
		tooltip: {
	        trigger: 'item',
	        formatter: function (params) {
	            return params.name;
	        }
	    },
	    legend: {
	    	data: ['滨州跨境电商产业园','滨州数字经济产业园','德州跨境电商产业园'],
	    },
	    visualMap: {
	    	show:true,
	        type: 'piecewise',
	        textStyle: {
	            color: '#4fbfd7'
	        },
	        right:20,
	        bottom:20,
	        pieces: [
	            {min: 300, max: 400, label: '德州跨境电商产业园', color: '#00ffaa'},
	            {min: 200, max: 300, label: '滨州数字经济产业园', color: '#be4f51'},
	            {min: 100,max: 200, label: '滨州跨境电商产业园', color: '#e3bf4c'}
	        ],
	        color: ['#00ffaa','#be4f51','#e3bf4c']
	    },
	    geo: {
	        map: '山东',
	        label: {
	        	show:true,
	        	color:'#4fbfd7',
	            emphasis: {
	                show: false
	            }
	        },
	        
	        itemStyle: {
	        	
	            normal: {
	            	areaColor: 'rgba(35, 61, 121, 0.6)',
	            	borderColor:'#4fbfd7',
                    shadowColor: '#4fbfd7',
                    borderWidth: 1.2,//设置外层边框
	            },
	            emphasis: {
	                	
                         
                         
	            }
	        }
	    },
	    series: [
	        {
	            type: 'effectScatter',
	            coordinateSystem: 'geo',
	            data: convertData([
	            	{name: "滨州跨境电商产业园", value: 150},
	                {name: "滨州数字经济产业园", value: 250},
	                {name: "德州跨境电商产业园", value: 350}
	            ]),
	            symbolSize: 12,
	            rippleEffect:{scale:'3',},//控制标点涟漪 文大小
	            label: {
	                normal: {
	                    show: false
	                },
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                emphasis: {
	                  //  borderColor: '#fff',
	                    borderWidth: 1
	                }
	            }
	        }
	    ]
	};
		


if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

4.效果查看