一、echart中國地圖高亮
在echart中國地圖中，我們可以非常輕鬆地實現對某個區域的高亮展示，只需利用echarts提供的API，即可設定相關的高亮屬性：
// 設定一個區域的高亮展示
myChart.setOption({
series: [{
type: 'map',
map: 'china',
emphasis: {
itemStyle: {
areaColor: '#F3B329'
}
},
label: {
show: true
},
data: []
}]
});
上述代碼中，我們將中國地圖設置為主視圖，然後用emphasis:itemStyle對象設定了該視圖的高亮顏色，其它屬性可以查閱echarts的文檔，以便進行合理的配置和實現。
二、echart中國地圖背景漸變
echart為用戶提供了豐富的可視化方案，其中一個實用的特性便是支持為地圖背景配置漸變的效果。我們只需稍加修改主題色值即可實現：
// 背景色漸變處理
myChart.setOption({
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#113681' // 0% 處的顏色
}, {
offset: 1, color: '#1979D2' // 100% 處的顏色
}],
globalCoord: false // 預設為 false
},
series: [{ ... }]
});
通過為屬性backgroundColor設定一個linear對象，即可實現對地圖背景色的線性漸變處理，具有極強的視覺衝擊力。
三、echart中國地圖圖例
同時，echart也支持可自定義的地圖圖例，如按照百分比顏色展示不同數據的區域：
// 設置echart圖例
myChart.setOption({
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默認為數值文本
calculable: true,
inRange: {
color: ['#B5C2CF', '#022B69']
}
},
series: [{ ... }]
});
如上方代碼所進行的操作，在echarts中常用屬性visualMap中，我們可以設置visualMap.inRange.color的顏色，以及相關的最大和最小值等內容，快速對地圖展示效果進行配置和調整。
四、echart中國地圖顛倒
在某些應用場景中，我們需要對中國地圖進行顛倒後的展示，此時也可以使用echart的相關API來輕鬆實現：
// 中國地圖顛倒
myChart.setOption({
geo: {
map: 'china',
top: '10%',
bottom: '15%',
left: '30%',
right: '30%',
roam: true,
scaleLimit: {
min: 1,
max: 2
},
inverse: true,
label: {
normal: {
show: true,
textStyle: {
color: '#ddd'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 處的顏色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 處的顏色
}],
globalCoord: false // 預設為 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: [{ ... }]
});
以上代碼中，我們將geo對象相關的參數進行設置實現中國地圖的顛倒顯示，如將top、bottom、left和right等坐標系參數進行合理配置，從而達到特定效果。
五、echart中國地圖icon
echart也支持在地圖中插入自定義的icon圖標，以方便用戶對地圖數據的展示和處理：
// 中國地圖自定義icon
myChart.setOption({
geo: {
map: 'china',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
roam: true,
itemStyle: {
normal: {
borderWidth: 0.5,
borderColor: 'rgba(0, 0, 0, 0.2)'
}
},
// 插入自定義icon
regions: [{
name: '南海諸島',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
},
// 自定義icon
geoCoord: {
'南海諸島': [112.921019, 8.325475]
},
type: 'effectScatter',
effectType: 'ripple',
symbolSize: 3
}]
},
series: [{ ... }]
});
在以上示例代碼中，我們在regions屬性中定義需要插入icon的區域和對應的一些樣式配置，如itemStyle，效果非常漂亮而且方便。
六、echart中國地圖默認高亮
echart實現中國地圖的默認高亮，使用上比較方便，只需在series中使用itemStyle中的emphasis對象，並設置高亮顏色即可，效果和前面提到的操作差別不大：
// 默認高亮一些區域
myChart.setOption({
series: [{
type: 'map',
map: 'china',
data: [],
itemStyle: {
normal: {
areaColor: '#F3B329',
borderColor: '#333',
borderWidth: 0.5
},
emphasis: {
areaColor: '#F3B329'
}
}
}]
});
七、echart中國地圖釣魚島
echarts中也提供釣魚島的相關地區信息，通過在echart中修改視圖項的相關調用參數即可實現釣魚島地區的高亮、顏色等配置：
// China's island color
var chinaIslandColor = '#C5CCD0';
option.series.push({
name: '',
type: 'map',
mapType: 'china',
selectedMode: 'single',
data: [],
itemStyle: {
normal: { label: { show: false } },
emphasis: { label: { show: false } }
},
geoCoord: {
'釣魚島': [123.5, 25.6]
},
markPoint: {
symbol: "image://img/diaoyu.png",
symbolSize: [24, 33],
itemStyle: {
normal: {
label: { show: false },
color: chinaIslandColor,
borderColor: '#fff',
borderWidth: 1.5
}
},
data: [
{ name: '釣魚島', value: 0, geoCoord: [123.5, 25.6] }
]
}
});
myChart.setOption(option, true);
如上述代碼所完成的操作，即為釣魚島地區的標註和強調的處理，方便用戶進行地圖結構性的認知。
八、echart中國地圖的某省邊框加粗
有時，我們需要對中國地圖中某些更為重要的省份邊框進行加粗和突出，以便更容易觀察到細節和特質，此時我們可以使用echart提供的邊框繪製功能完成相關的操作，其實現代碼如下：
// 中國地圖省份邊框加粗
myChart.setOption({
series: [{
type: 'map',
map: 'china',
itemStyle: {
normal: {
label: {
show: true
},
borderWidth: 1,
borderColor: '#009fe8'
},
emphasis: {
label: {
show: true
}
}
},
data: []
}, {
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, //長寬比
showLegendSymbol: false, // 存在legend時顯示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: []
}]
});
以上代碼中，我們僅需將itemStyle.normal中的borderWidth對應的值調整為讓相關區域邊框加粗即可實現該特性的實現。
九、echarts中國地圖的使用
最後，我們整理一份完整的echarts中國地圖的示例代碼如下，方便大家使用和了解echarts相關的操作：
中國地圖 原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/238720.html
微信掃一掃 
支付寶掃一掃 