很偶然的机会帮朋友做一个辽宁省地图的展示，鼠标悬停各个市显示不同的数据，理解不太深入，只是觉得有必要记录一下
先上效果
image.png
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="height:800px;"></div>
<script type="text/JavaScript" src="js/echarts.min.js"></script>
<script type="text/JavaScript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/JavaScript" src="json/liaoning.json"></script>
<script type="text/JavaScript" src="json/china.json"></script>
<script type="text/javascript">
window.onload = function () {
var mapChart;
var option;
$.get('json/liaoning.json', function (liaoningJson) {
echarts.registerMap('辽宁省', liaoningJson);
mapChart = echarts.init(document.getElementById('main'));
option = {
title:{
text: '辽宁各市分布图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (个)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series:[
{
name: '辽宁省各市统计图',
type: 'map',
map: '辽宁省', // 自定义扩展图表类型
aspectScale: 1.0, //地图长宽比. default: 0.75
zoom: 1.1, //控制地图的zoom，动手自己更改下 看看什么效果吧
roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [
{name:'大连市', value: 1800},
{name:'朝阳市', value: 1700},
{name:'丹东市', value: 1600},
{name:'铁岭市', value: 1400},
{name:'沈阳市', value: 1200},
{name:'抚顺市', value: 1000},
{name:'葫芦岛市', value: 800},
{name:'阜新市', value: 600},
{name:'锦州市', value: 400},
{name:'鞍山市', value: 200},
{name:'本溪市', value: 100},
{name:'营口市', value: 300},
{name:'辽阳市', value: 500},
{name:'盘锦市', value: 700}
]
}
]
}
mapChart.setOption(option);
});
}
</script>
</body>
</html>
用到的js脚本
echarts.min.js
jquery-1.11.2.min.js
liaoning.json
china.json
网友评论