持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天。
随着物联网的普及,大屏的应用场景也越来越多,其中图表展示可谓很普遍了,但是地图的用法有些同学却很陌生,今天我们就来说一说地图的实现方法。
知识点:echarts、vue
这里把公共部分的代码先贴出来
HTML:
<div id="echarts_map"></div>
绘制图表的方法:
mounted(){
// 绘制地图
this.echarts();
},
methods: {
echarts(){
var myChart = this.$echarts.init(document.getElementById("echarts_map"));
myChart.setOption(option);
myChart.on("click", function (params) {
console.log(params.name);
});
window.addEventListener("resize", function () {
myChart.resize();
});
},
}
用 echarts 来实现也有两种不同的方法,这里只贴重点的 options 设置部分的代码:
(1)通过 serise
实现效果:
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [{
type: 'map', // 这是数据类型
mapType: 'henan', // 这里配置地图的类型
label: {
normal: {
show: true
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: [
{ name: '郑州市', value: 100 },
{ name: '洛阳市', value: 10 },
{ name: '开封市', value: 20 },
{ name: '信阳市', value: 30 },
{ name: '驻马店市', value: 40 },
{ name: '南阳市', value: 41 },
{ name: '周口市', value: 15 },
{ name: '许昌市', value: 25 },
{ name: '平顶山市', value: 35 },
{ name: '新乡市', value: 35 },
{ name: '漯河市', value: 35 },
{ name: '商丘市', value: 35 },
{ name: '三门峡市', value: 35 },
{ name: '济源市', value: 35 },
{ name: '焦作市', value: 35 },
{ name: '安阳市', value: 35 },
{ name: '鹤壁市', value: 35 },
{ name: '濮阳市', value: 35 },
{ name: '开封市', value: 45 }
]
}],
};
(2) 通过 geo 配置
实现效果:
引入地图数据:
import 'echarts/map/js/world'
var option = {
geo: {
//全国地图map:"china",全球为map:"world"
map: "world",
right: "5%",
left: "5%",
top: '5%',
bottom: '5%',
roam: true,
// silent: true, // 取消 点击事件
label: {
normal: {
show: false
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
// 地区名称映射
nameMap: {
'China' : '中国',
'Russia' : '俄罗斯',
'Thailand' : '东盟'
},
// 根据名称定义不同的背景颜色
regions: [
{
name: '东盟',
itemStyle: {
areaColor: '#00ff68',
borderColor: '#1890ff'
},
label: {
show: true,
color: '#fff'
}
},
{
name: '中国',
itemStyle: {
areaColor: '#ff3c4d',
borderColor: '#1890ff'
},
label: {
show: true,
color: '#fff'
}
},
{
name: '俄罗斯',
itemStyle: {
areaColor: '#febf01',
borderColor: '#1890ff'
},
label: {
show: true,
color: '#fff'
}
}
],
itemStyle: {
normal: {
borderWidth: 1,
areaColor: "#040564",
borderColor: "#3fbcea",
label: {
color: '#fff'
}
},
emphasis: {
color: '#fff',
areaColor: "#00e4ff"
},
}
},
};
其中有一点需要注意:地图的绘制需要的数据要单独引入。