<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//1、初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//2、图表配置。
var uploadedDataURL = "./geo/xinjiang.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('xinjiang', geoJson);
myChart.hideLoading();
var option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: '#020933',
title: {
top: 20,
text: "新疆地图",
left: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
geo: {
map: 'xinjiang',
roam: false,
itemStyle: {
normal: {
areaColor: '#013c62',
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 25
}
}
},
series: [
{
type: 'map',
map: 'xinjiang',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
},
emphasis: {
areaColor: '#2ab8ff',
borderWidth: 1.5,
}
},
},
]
}
let index = -1;//数据下标。
var timer = setInterval(function () {
//隐藏当前提示框。
hideTip(0, index);
// 取消当前高亮数据。
downplay(0, index);
// 显示下一个数据提示框。
showTip(0, index + 1);
//高亮下一条数据。
highlight(0, index + 1);
index++;
if (index > 17) {
index = -1;
}
}, 2000)
//鼠标移入地图区域。
myChart.on('mousemove', function (e) {
clearInterval(timer);
//取消当前所有高亮。
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
//将鼠标移入的区域高亮。
highlight(0, e.dataIndex);
//将鼠标移入的区域显示提示信息。
showTip(0, e.dataIndex);
});
//鼠标移出地图区域。
myChart.on('mouseout', function (e) {
//取消当前所有高亮。
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
timer = setInterval(function () {
// 隐藏提示框。
hideTip(0, index);
// 取消高亮指定的数据图形。
downplay(0, index);
// 显示提示框。
showTip(0, index + 1);
// 高亮指定的数据图形。
highlight(0, index + 1);
index++;
if (index > 17) {
index = -1;
}
}, 2000);
});
//显示提示信息。seriesIndex=系列下标。dataIndex=数据下标。
function showTip(seriesIndex, dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
}
//隐藏提示信息。seriesIndex=系列下标。dataIndex=数据下标。
function hideTip(seriesIndex, dataIndex) {
myChart.dispatchAction({
type: 'hideTip',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
}
//高亮指定数据。seriesIndex=系列下标。dataIndex=数据下标。
function highlight(seriesIndex, dataIndex) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
}
//取消高亮。seriesIndex=系列下标。dataIndex=数据下标。
function downplay(seriesIndex, dataIndex) {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
}
//3、通过图表对象的setOption方法和图表配置进行关联。
myChart.setOption(option);
})
</script>
</body>
</html>
