前言
Echarts Map中的地图需要按照区域所绑定的值进行渲染,以展示不同区域的属性值。
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0px;
height: 0px;
}
#map{
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var Value = [
{name:"莱芜市",value:"100"},
{name:"威海市",value:"50"},
{name:"滨州市",value:"20"},
{name:"临沂市",value:"90"},
{name:"淄博市",value:"170"},
{name:"日照市",value:"190"},
{name:"德州市",value:"160"},
{name:"烟台市",value:"140"},
{name:"菏泽市",value:"130"},
{name:"青岛市",value:"110"},
{name:"东营市",value:"105"},
{name:"潍坊市",value:"142"},
{name:"济南市",value:"80"},
{name:"聊城市",value:"184"},
{name:"泰安市",value:"55"},
{name:"枣庄市",value:"130"},
{name:"济宁市",value:"40"}
];
// JSON
$.getJSON('./json/shandong.json', function (data) {
echarts.registerMap('shandong', data);
var chart = echarts.init(document.getElementById('map'));
var option = {
title: {
text: '值渲染',
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value;
},
extraCssText:"height:20px;"
},
visualMap: {
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
text:['High','Low'], // 文本,默认为数值文本
},
series: [
{
name: 'USA PopEstimates',
type: 'map',
roam: true,
map: 'shandong',
label: {
show:true,
normal: {
show: true,
color:"#000",
},
emphasis: {
show: true,
fontSize:16,
color:"#fff"
}
},
itemStyle:{
emphasis:{label:{show:true}}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data:Value
},
]
};
chart.setOption(option);
});
</script>
</body>
</html>