項(xiàng)目中遇到個(gè)需求需要實(shí)現(xiàn)十線段的地圖霜医，翻看了echarts的官網(wǎng)自己也動(dòng)手配置了一下齿拂，發(fā)現(xiàn)怎么都搞不出來。我發(fā)現(xiàn)大概是數(shù)據(jù)的問題肴敛，echarts提供的china.json文件中的數(shù)據(jù)是配置不出來的署海。南海諸島總是會(huì)懸浮到右下角。后來又結(jié)合百度地圖進(jìn)行了配置医男，會(huì)把世界地圖都顯示出來砸狞，一時(shí)間也沒找到好的方法實(shí)現(xiàn)。
在網(wǎng)上查詢發(fā)現(xiàn)了新大陸镀梭，找到了一個(gè)生成地圖數(shù)據(jù)的網(wǎng)站刀森，替換echarts提供的china.json后果然可行了,記錄下來方便以后使用。網(wǎng)站鏈接：http://datav.aliyun.com/tools/atlas/#&lat=36.491973470593685&lng=96.240234375&zoom=4
下載好json數(shù)據(jù)(可在線格式化一下)后下面我們進(jìn)行配置
<div id="maps"></div>//地圖容器
<script src="jquery-3.2.1.min.js"></script>
<script src="echarts.js"></script>//引入echarts的js文件
<script src="china.js"></script>//我將格式化后的json數(shù)據(jù)賦給了一個(gè)變量存放到china.js中
var datas = [//隨意生成了一些數(shù)據(jù)可用來設(shè)置不同省份區(qū)域的背景色,注意name需要與我們生成的json中的名字相同
{ name: '北京', value: Math.round(Math.random() * 500) },
{ name: '天津', value: Math.round(Math.random() * 500) },
{ name: '上海', value: Math.round(Math.random() * 500) },
{ name: '重慶', value: Math.round(Math.random() * 500) },
{ name: '河北', value: Math.round(Math.random() * 500) },
{ name: '河南', value: Math.round(Math.random() * 500) },
{ name: '云南', value: Math.round(Math.random() * 500) },
{ name: '遼寧', value: Math.round(Math.random() * 500) },
{ name: '黑龍江', value: Math.round(Math.random() * 500) },
{ name: '湖南', value: Math.round(Math.random() * 500) },
{ name: '安徽', value: Math.round(Math.random() * 500) },
{ name: '山東', value: Math.round(Math.random() * 500) },
{ name: '新疆', value: Math.round(Math.random() * 500) },
{ name: '江蘇', value: Math.round(Math.random() * 500) },
{ name: '浙江', value: Math.round(Math.random() * 500) },
{ name: '江西', value: Math.round(Math.random() * 500) },
{ name: '湖北', value: Math.round(Math.random() * 500) },
{ name: '廣西', value: Math.round(Math.random() * 500) },
{ name: '甘肅', value: Math.round(Math.random() * 500) },
{ name: '山西', value: Math.round(Math.random() * 500) },
{ name: '內(nèi)蒙古', value: Math.round(Math.random() * 500) },
{ name: '陜西', value: Math.round(Math.random() * 500) },
{ name: '吉林', value: Math.round(Math.random() * 500) },
{ name: '福建', value: Math.round(Math.random() * 500) },
{ name: '貴州', value: Math.round(Math.random() * 500) },
{ name: '廣東', value: Math.round(Math.random() * 500) },
{ name: '青海', value: Math.round(Math.random() * 500) },
{ name: '西藏', value: Math.round(Math.random() * 500) },
{ name: '四川', value: Math.round(Math.random() * 500) },
{ name: '寧夏', value: Math.round(Math.random() * 500) },
{ name: '海南', value: Math.round(Math.random() * 500) },
{ name: '臺(tái)灣', value: Math.round(Math.random() * 500) },
{ name: '香港', value: Math.round(Math.random() * 500) },
{ name: '澳門', value: Math.round(Math.random() * 500) }
];
var map = document.getElementById("maps");
echarts.registerMap('chinas', chinaJson);//根據(jù)自定義數(shù)據(jù)注冊(cè)一個(gè)地圖报账，如果需要旁邊懸浮南海諸島第一個(gè)參數(shù)設(shè)置為"china"研底，不需要展示可自定義一個(gè)名字
var myChart = echarts.init(map);//初始化地圖
drawMap(myChart);
function drawMap (myChart) {
myChart.setOption( {
tooltip: {},
series: [
{
name: '',
type: 'map',
map: 'chinas',
itemStyle: {
normal: {
borderColor: '#00fff6'
},
emphasis: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
show: true,
color: "#fff",
fontSize: 10,
formatter: function(params){
for (var i = 0; i < datas.length; i++) {
if(params.name == datas[i].name){
return params.name + datas[i].value
}
}
return "";
},
color: '#FFFFFF',
verticalAlign:"bottom",
},
data: datas
}
],
visualMap: [{
show: false,//旁邊是否展示分段信息true為展示
max: 500,
min: 0,
inRange: {//配置顏色漸變范圍
color: ['#fd020e', '#fd026c', '#fd02cb', '#e202fd', '#9002fd', '#4902fd', '#0208fd', '#026cfd', '#02b9fd', '#02fdcb', '#fdd702']
},
pieces: [//自定義每一段的范圍
{min: 450}, // 不指定 max，表示 max 為無限大（Infinity）透罢。
{min: 400, max: 449},
{min: 350, max: 399},
{min: 300, max: 349},
{min: 250, max: 299},
{min: 200, max: 249},
{min: 150, max: 199},
{min: 100, max: 149},
{min: 80, max: 99},
{min: 40, max: 79},
{min: 0, max:39} // 不指定 min榜晦，表示 min 為無限大（-Infinity）。
],
textStyle: {
color: "#fff"
},
}]
}
)
}
配置完成后打開頁面效果如圖：
map.png
還有很多配置大家可根據(jù)官網(wǎng)提供的API自行配置羽圃。
