vuejs+echarts实现在地图上绘制散点
1、实现后的效果图
2、引入静态资源
在public文件下创建data文件夹，data文件夹下创建china文件夹用于存放各省市经纬度JSON数据(未上传)
3、在http.js文件中添加请求方法
locGet(url, param = {}, x_api) {
delete param._rowKey;
delete param._index;
return new Promise((resolve, reject) => {
service({
method: 'get',
url,
x_api,
params: param,
cancelToken: new CancelToken((c) => {
cancel = c;
})
})
.then((res) => {
if (res.status === 200) {
resolve(res.data);
} else {
reject(res.data);
}
})
.catch((error) => {
reject(error)
})
})
},
4、DOM容器
<div class="echart">
<div id="totalSalesDistribution" style="height: 600px;"></div>
</div>
5、初始化echarts实例
<script>
export default {
name:'totalSalesDistribution',
data(){
return {
option:{
title: {
text: '全国各省市总销售额分布',
left:'left'
},
tooltip: {
trigger: 'item'
},
geo: {
type: 'map',
map: 'china',
showLegendSymbol: false,
zoom:1.2,
aspectScale:1.1,
tooltip: {
trigger: 'item',
formatter: function (params) {
if(params.componentType === 'geo'){
return ''
}else if(params.componentType === 'series'){
let name = params.data.name;
let count = params.data.count;
let seriesName = params.seriesName;
return seriesName + '<br />' + `<div style="display:flex;align-items:center;"><div>${name}</div><div style="margin-left:20px;font-weight:500;font-size:16px;">${count}</div></div>`
}
}
},
label: {
normal: {
show: true,
fontSize:12,
},
emphasis: {
show: true,
color:'#333',
}
},
emphasis:{
label:{
show: true,
color:'#333',
},
itemStyle:{
areaColor: 'rgba(57,233,255,0.2)', //鼠标滑过区域颜色
borderColor:'#39E9FF',
}
},
select:{
label:{
show: true,
color:'#333',
},
itemStyle:{
areaColor: 'rgba(57,233,255,0.2)', //选中区域颜色
borderColor:'#39E9FF',
}
},
roam: false,
},
series: [
{
name: '省份总额度',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 1,
data: [],
symbolSize: 16,
symbol: 'circle',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
showEffectOn: "render",
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: {
type: "radial",
colorStops: [
{
offset: 0,
color: "#6e96d4",
},
{
offset: 0.8,
color: "#6e96d4",
},
{
offset: 1,
color: "#6e96d4",
},
],
global: false, // 缺省为 false
},
},
},
},
]
}
}
},
methods: {
//设置地图数据值
filterMapData(mapDataList) {
let data = [
{
count: 1,
name: "福建省"
},
{
count: 1,
name: "辽宁省"
}
]
return mapDataList.map((item, index) => {
let obj = {};
obj.name = item.properties.name;
obj.value = 0;
data.map((o,i)=>{
if(o.name === item.properties.name){
obj.value = item.properties.centroid;
obj.count = o.count;
}
});
if(item.properties.name === '甘肃省'){
obj.emphasis={
label:{
show: true,
color:'#fff',
offset: [-30,-30]
}
}
}
obj.adcode = item.properties.adcode;
obj.level = item.properties.level;
return obj;
});
},
//获取地图接口
getMap(mapChart){
let that = this;
let param = {};
let path = 请求基本路径 + '/data-center/data/china/'+ '100000_full' + '.json';
that.$http.locGet(path, param).then((res) => {
let areaName = 'china';
that.$echarts.registerMap(areaName, res);
if ( res && res.features && res.features.length>0) {
that.option.series[0].data = that.filterMapData(res.features);
mapChart.setOption(that.option,true);
window.addEventListener("resize", () => {
mapChart.resize();
});
}
})
.catch((err) => {
console.log("获取本地数据异常");
});
},
initCharts() {
// 获取dom节点
let mapChart = this.$echarts.init(document.getElementById("totalSalesDistribution"));
// option配置写在最下面的
this.getMap(mapChart);
}
},
mounted(){
this.initCharts();
},
}
</script>
