通过echarts.min.js和china.js实现中国地图效果。
html代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>省份客户量实时监控</title><link href="/js/map/index.css" rel="stylesheet" /><script src="/js/jquery/jquery-1.8.2.js" type="text/javascript"></script><script src="/js/map/echarts.min.js"></script><script src="/js/map/china.js"></script><script src="/js/map/center2.js?v=20250208"></script>
</head>
<body><div id="title">全国客户分布分析</div><div id="center2"></div>
</body>
</html>index.css代码如下：
body {background: #333;
}#title {position: absolute;z-index: 1;top: 40px;left: 0;width: 100%;height: 10%;letter-spacing: 2px;/* background: #555; *//* color: white; */color: yellow;/* font-size: 35px; */font-size: 18px;font-weight: bold;/* 弹性盒子布局 */display: flex;/* 水平剧中*/justify-content: center;/* 垂直居中*/align-items: center;
}#center2 {position: absolute;width: 79%;height: 100%;top: 3%;left: 10%;background: #888;
}center2.js代码如下：
// 初始化echart实例对象
var myChart = echarts.init(document.getElementById('center2'), 'dark');// 指定图表的配置项和数据
var option = {/*backgroundColor: '#fff', // 设置整个地图容器的背景色*/grid: {left: '10%', // 距离容器左侧的距离right: '10%', // 距离容器右侧的距离top: '10%', // 距离容器顶部的距离bottom: '10%' // 距离容器底部的距离},title: {text: '',textStyle: {color: 'gold',fontStyle: 'normal',},left: 'center',top: '0px'},tooltip: {trigger: 'item'},visualMap: { // 左侧小导航图标show: true,x: 'left',y: 'bottom',top: '75%',left: '22%',textStyle: {fontSize: 8,},//calculable: true,//inRange: {// color: [ '#F9DCD1', '#F2AD92', '#E55B25', '#C64918','#8A3310']//},splitList: [{start: 1,end: 9},{start: 10,end: 99},{start: 100,end: 999},{start: 1000,end: 9999},{start: 10000}],color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']},series: [{name: '客户量',type: 'map',mapType: 'china',roam: false, // 禁用拖动和缩放itemStyle: { // 图形样式normal: {borderWidth: .5, //区域边框宽度borderColor: '#009fe8', //区域边框颜色areaColor: "#ffefd5", //区域颜色},emphasis: { // 鼠标滑过地图高亮的相关设置borderWidth: .5,borderColor: '#4b0082',areaColor: "#fff",}},label: { // 图形上的文本标签normal: {show: true, //省份名称fontSize: 10,},emphasis: {show: true,fontSize: 10,}},data: [] /*{'name': '上海','value': 318}, {'name': '云南','value': 162}*/}]
};$(document).ready(function () {// 初始化数据bindData();// 获取省份数据并绑定-地图function bindData() {$.ajax({type: "POST", //用POST方式传输dataType: "json", //数据格式:htmlurl: '/tools/admin_ajax.ashx?action=GetProvinceCustomersNum', //目标地址data: {},async: false,success: function (data) {if (data != null) {$.each(data, function (i, val) {var province = val.Name.replace('省', '').replace('壮族自治区', '').replace('回族自治区', '').replace('维吾尔自治区', '').replace('自治区', '');option.series[0].data.push({'name': province,'value': val.CusNum})});}},error: function (XMLHttpRequest, textStatus, errorThrown) {return false;}});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}});效果如下：
注：echarts.min.js和china.js可从网上搜索下载