1. 程式人生 > >echarts中國地圖描繪

echarts中國地圖描繪

text Matter mui pacman scala tool -- lin item

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>首頁</title>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/area_static_con.js"></script>
<link href="css/mui.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
<link rel="stylesheet" type="text/css" href="css/loading.css"/>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
$(".loading").addClass("loader-chanage")
$(".loading").fadeOut(300)
mui.init();
})
</script>
<style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<!--loading頁開始-->
<div class="loading">
<div class="loader">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--loading頁結束-->
<div id="china-map"></div>

<script>
var myChart = echarts.init(document.getElementById(‘china-map‘));
var option = {
tooltip: {
// show: false //不顯示提示標簽
formatter: ‘{b}‘, //提示標簽格式
backgroundColor:"#ff7f50",//提示標簽背景顏色
textStyle:{color:"#fff"} //提示標簽字體顏色
},
series: [{
type: ‘map‘,
mapType: ‘china‘,
label: {
normal: {
show: true,//顯示省份標簽
textStyle:{color:"#c71585"}//省份標簽字體顏色
},
emphasis: {//對應的鼠標懸浮效果
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//區域邊框寬度
borderColor: ‘#009fe8‘,//區域邊框顏色
areaColor:"#ffefd5",//區域顏色
},
emphasis: {
borderWidth: .5,
borderColor: ‘#4b0082‘,
areaColor:"#ffdead",
}
},
data:[
//{name:‘福建‘, selected:true}//福建為選中狀態
]
}],
};

myChart.setOption(option);
myChart.on(‘mouseover‘, function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
<body>
</body>
</html>

echarts中國地圖描繪