------html
<div class="map-box" id="map"></div>
------css
.map-box{width:345px;height:465px}
------js
<script src="/spg/js/map/js/echarts.min.js"></script>
<script type="text/javascript" src="/spg/js/map/js/map/province/shanxi1.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(\'map\'));
//这里记录每个城市的坐标信息（不全）
var geoCoordMap = {
\'西安市\': [108.95, 34.27],
\'榆林市\': [109.77, 38.3],
\'延安市\': [109.47, 36.6],
\'咸阳市\': [108.72, 34.36],
\'铜川市\': [109.11, 35.09],
\'渭南市\': [109.5, 34.52],
\'宝鸡市\': [107.15, 34.38],
\'汉中市\': [108.04, 33.07],
\'安康市\': [109.02, 32.7],
\'商洛市\': [109.939776, 33.868319],
\'新城区\': [108.960716, 34.266447],
\'碑林区\': [108.94059, 34.256783],
\'莲湖区\': [108.943895, 34.265239],
\'灞桥区\': [109.064646, 34.272793],
\'未央区\': [108.946825, 34.29292],
\'雁塔区\': [108.944644, 34.214113],
\'阎良区\': [109.226124, 34.662232],
\'临潼区\': [109.214237, 34.367069],
\'长安区\': [108.907173, 34.158926],
\'高陵区\': [109.088297, 34.534829],
\'蓝田县\': [109.32345, 34.151298],
\'周至县\': [108.222162, 34.163669],
\'鄠邑区\': [108.604894, 34.109244],
\'王益区\': [109.075578, 35.068964],
\'印台区\': [109.099974, 35.114492],
\'耀州区\': [108.980102, 34.909793],
\'宜君县\': [109.116932, 35.398577],
\'渭滨区\': [107.155344, 34.355068],
\'金台区\': [107.146806, 34.376069],
\'陈仓区\': [107.369987, 34.35147],
\'凤翔县\': [107.400737, 34.521217],
\'岐山县\': [107.621053, 34.443459],
\'扶风县\': [107.900219, 34.37541],
\'眉县\': [107.749766, 34.274246],
\'陇县\': [106.864397, 34.89305],
\'千阳县\': [107.132441, 34.642381],
\'麟游县\': [107.793524, 34.677902],
\'凤县\': [106.515803, 33.91091],
\'太白县\': [107.319116, 34.058401],
\'秦都区\': [108.706272, 34.329567],
\'杨陵区\': [108.084731, 34.272117],
\'渭城区\': [108.737204, 34.36195],
\'三原县\': [108.940509, 34.617381],
\'泾阳县\': [108.842622, 34.527114],
\'乾县\': [108.239473, 34.527551],
\'礼泉县\': [108.425018, 34.481764],
\'永寿县\': [108.142311, 34.691979],
\'彬县\': [108.077658, 35.043911],
\'长武县\': [107.798757, 35.205886],
\'旬邑县\': [108.333986, 35.111978],
\'淳化县\': [108.580681, 34.79925],
\'武功县\': [108.200398, 34.260203],
\'兴平市\': [108.490475, 34.29922],
\'临渭区\': [109.510175, 34.499314],
\'华州区\': [109.775247, 34.495915],
\'潼关县\': [110.246349, 34.544296],
\'大荔县\': [109.941734, 34.797259],
\'合阳县\': [110.149453, 35.237988],
\'澄城县\': [109.93235, 35.190245],
\'蒲城县\': [109.586403, 34.955562],
\'白水县\': [109.590671, 35.177451],
\'富平县\': [109.18032, 34.751077],
\'韩城市\': [110.442846, 35.476788],
\'华阴市\': [110.092078, 34.566079],
\'宝塔区\': [109.48976, 36.585472],
\'延长县\': [110.012334, 36.579313],
\'延川县\': [110.193514, 36.878117],
\'子长县\': [109.675264, 37.142535],
\'安塞区\': [109.328842, 36.863853],
\'志丹县\': [108.768432, 36.822194],
\'吴起县\': [108.175933, 36.927215],
\'甘泉县\': [109.351019, 36.276526],
\'富县\': [109.379776, 35.987953],
\'洛川县\': [109.432369, 35.761974],
\'宜川县\': [110.168963, 36.050178],
\'黄龙县\': [109.840314, 35.584743],
\'黄陵县\': [109.262961, 35.579427],
\'汉台区\': [107.031856, 33.067771],
\'南郑县\': [106.93623, 32.999333],
\'城固县\': [107.33393, 33.157131],
\'洋县\': [107.545836, 33.222738],
\'西乡县\': [107.766613, 32.983101],
\'勉县\': [106.673221, 33.153553],
\'宁强县\': [106.257171, 32.829694],
\'略阳县\': [106.156718, 33.327281],
\'镇巴县\': [107.895035, 32.536704],
\'留坝县\': [106.920808, 33.617571],
\'佛坪县\': [107.990538, 33.524359],
\'榆阳区\': [109.721069, 38.277046],
\'横山区\': [109.294346, 37.962208],
\'神木市\': [110.498939, 38.842578],
\'府谷县\': [111.067276, 39.028116],
\'靖边县\': [108.793988, 37.599438],
\'定边县\': [107.601267, 37.594612],
\'绥德县\': [110.263362, 37.50294],
\'米脂县\': [110.183754, 37.755416],
\'佳县\': [110.491345, 38.01951],
\'吴堡县\': [110.739673, 37.452067],
\'清涧县\': [110.121209, 37.088878],
\'子洲县\': [110.03525, 37.610683],
\'汉滨区\': [109.026836, 32.695172],
\'汉阴县\': [108.508745, 32.893026],
\'石泉县\': [108.247886, 33.038408],
\'宁陕县\': [108.314283, 33.310527],
\'紫阳县\': [108.534228, 32.520246],
\'岚皋县\': [108.902049, 32.307001],
\'平利县\': [109.361864, 32.388854],
\'镇坪县\': [109.526873, 31.883672],
\'旬阳县\': [109.361024, 32.832012],
\'白河县\': [110.112629, 32.809026],
\'商州区\': [109.941839, 33.862599],
\'洛南县\': [110.148508, 34.090837],
\'丹凤县\': [110.32733, 33.695783],
\'商南县\': [110.881807, 33.530995],
\'山阳县\': [109.882289, 33.532172],
\'镇安县\': [109.152892, 33.423357],
\'柞水县\': [109.114206, 33.68611]
};
var areaName = $.cookie("areaFullName");
$("#areaname").val(areaName);
var shortAreaName = areaName.substring(areaName.lastIndexOf("-") + 1, areaName.length);
var data = [
{ name: shortAreaName, value: shortAreaName }
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var fromCoord = geoCoordMap[data[i].name];//获取城市的坐标 source
var toCoord = geoCoordMap[data[i].value];//获取城市的坐标 destination
if (fromCoord && toCoord) {
res.push({
fromName: data[i].name,
toName: data[i].value,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
// 根据data得到放射光标效果图。如果起始城市没有值的话，就只显示目的城市
var convertData1 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
var geoCoord1 = geoCoordMap[data[i].value];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
if (geoCoord1) {
res.push({
name: data[i].value,
value: geoCoord1.concat(data[i].name)
})
}
}
return res;
};
//设置一些可选的参数
option = {
//设置背景颜色
// backgroundColor: \'#f3f3f3\',
//设置图片标题、子标题、文本颜色等等
title: {
text: \'地图显示\',
left: \'center\',
textStyle: {
color: \'#000\'
}
},
tooltip: {
trigger: \'item\'
},
geo: {
map: \'陕西\',
label: {
emphasis: {
show: true
}
},
//是否可以点击鼠标、滚轮缩放
roam: true,
},
//series就是要绘制的地图的主体。是一个数组，也就是说可以有多个数据进行绘制。这里有两个，一个是两个城市的连线，一个是对两个城市进行高亮显示。其中的type是很重要的参数，主要有饼图、条形图、线、地图等等。具体的可以去参考官网上的配置手册。
series:
[
{
name: \'rode\',
type: \'lines\',
coordinateSystem: \'geo\',
data: convertData(data),
effect: {
show: true,
period: 6,
trailLength: 0,
},
lineStyle: {
normal: {
color: \'#389BB7\',
width: 1,
opacity: 0.4,
curveness: 0.2
}
}
},
{
name: \'city\',
type: \'effectScatter\',
coordinateSystem: \'geo\',
rippleEffect: {
brushType: \'stroke\',
scale: 10
},
label: {
normal: {
show: true,
position: \'right\',
formatter: \'{b}\'
}
},
symbolSize: 8,
itemStyle: {
normal: {
color: \'#389BB7\',
}
},
data: convertData1(data)
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//定义数据
var globalIndex = 0;
//一直要执行的函数
function nocease() {
var areaName = $.cookie("areaFullName");
$("#areaname").val(areaName);
var shortAreaName = areaName.substring(areaName.lastIndexOf("-") + 1, areaName.length);
var data = [
{ name: shortAreaName, value: shortAreaName }
];
var dataArray = new Array();
dataArray[0] = [{ value: shortAreaName }];
//随机取1-5
data = dataArray[globalIndex % 5];
globalIndex++;
var option = myChart.getOption();
// if(data.name)
// {
// option.series[0].data = convertData(data);
// option.series[1].data = convertData1(data);
// }
// else{
// option.series[0].data = null;
// option.series[1].data = convertData1(data);
// }
myChart.setOption(option);
}
setInterval("nocease()", "10000");
</script>