ECharts绘制中国地图、广西地图
生活随笔
收集整理的這篇文章主要介紹了
ECharts绘制中国地图、广西地图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
準(zhǔn)備工作：導(dǎo)入ECharts依賴、和地圖需要的.js文件。
文件獲取方式：
官網(wǎng)：url
github：url
(下載完后 ：incubator-echarts-4.8.0mapjsprovince目錄下有各個省級的.js文件)
繪制中國地圖
先在html中添加一個地圖要掛載的節(jié)點：china-map
<body>
<div class="china-map" id="china-map"></div>
</body>
js:
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var option = {
tooltip: {
// show: false //不顯示提示標(biāo)簽
formatter: '{b}', //提示標(biāo)簽格式
backgroundColor:"#ff7f50",//提示標(biāo)簽背景顏色
textStyle:{color:"#fff"} //提示標(biāo)簽字體顏色
},
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: true,//顯示省份標(biāo)簽
textStyle:{color:"#c71585"}//省份標(biāo)簽字體顏色
},
emphasis: {//對應(yīng)的鼠標(biāo)懸浮效果
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//區(qū)域邊框?qū)挾? borderColor: '#009fe8',//區(qū)域邊框顏色
areaColor:"#ffefd5",//區(qū)域顏色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
},
data:[
{name:'廣西', selected:true},//廣西為選中狀態(tài)
{name:'貴州', selected:true},//貴州為選中狀態(tài)
{name:'云南', selected:true},//云南為選中狀態(tài)
{name:'廣東', selected:true},//云南為選中狀態(tài)
{name:'海南', selected:true},//云南為選中狀態(tài)
{name:'湖北', selected:true},//云南為選中狀態(tài)
]
}],
};
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
繪制廣西地圖
和上面的中國地圖類似：
<body>
<div class="china-map" id="guangxi-map"></div>
</body>
var myChart = echarts.init(document.getElementById('guangxi-map'));
var option = {
title: {
text : '廣西地圖',
subtext : '各市區(qū)顯示'
},
tooltip: {
// show: false //不顯示提示標(biāo)簽
formatter: '{b}', //提示標(biāo)簽格式
backgroundColor:"#ff7f50",//提示標(biāo)簽背景顏色
textStyle:{color:"#fff"} //提示標(biāo)簽字體顏色
},
series: [
{
name: '數(shù)據(jù)名稱',
type: 'map',
mapType: '廣西',
selectedMode : 'single',
label: {
normal: {
show: true,//顯示市區(qū)標(biāo)簽
textStyle:{color:"#c71585"}//省份標(biāo)簽字體顏色
},
emphasis: {//對應(yīng)的鼠標(biāo)懸浮效果
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle:{
normal: {
borderWidth: .5,//區(qū)域邊框?qū)挾? borderColor: '#009fe8',//區(qū)域邊框顏色
areaColor:"#ffefd5",//區(qū)域顏色
},
emphasis: {
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
},
data:[
{name:'南寧市', selected:true},//**為選中狀態(tài)
{name:'百色市', selected:true},//**為選中狀態(tài)
{name:'玉林市', selected:true},//**為選中狀態(tài)
{name:'柳州市', selected:true},//**為選中狀態(tài)
]
}]
};
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
效果展示：
總結(jié)
以上是生活随笔為你收集整理的ECharts绘制中国地图、广西地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 10、angular的全部api
- 下一篇： 分布分析