Echarts—根据地理坐标被标注的中国地图
中国地图
- 实现效果图
- 创建echartChina.vue组件
- 使用echartChina.vue组件
- 修改标记图标为图片
实现效果图
这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！
创建echartChina.vue组件
1.点击下载中国地图json文件
把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！
2.先写一个echartChina.vue组件
<template>
<div id="china_map"></div>
</template>
<script>
import * as echarts from 'echarts';
import china from '@/utils/china.json'
echarts.registerMap('china', china)
export default {
data() {
return {
};
},
methods: {
//初始化中国地图
initEchartMap() {
let mapDiv = document.getElementById('china_map');
let myChart = echarts.init(mapDiv);
var options
options = {
tooltip: {
show:false,
triggerOn: "mousemove", //mousemove、click
padding:8,
backgroundColor:'rgba(0,0,0,0.6)',
borderWidth:0,
textStyle:{
color:'#fff',
fontSize:12
},
},
geo: {
map: "china",
roam: false,// 一定要关闭拖拽
zoom: 1.6,
center: [102, 36], // 调整地图位置
aspectScale: 0.80, //长宽比
label: {
normal: {
show: false, //关闭省份名展示
fontSize: "10",
color: "rgba(0,0,0,0.7)"
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: "#0d0059",
borderColor: "#389dff",
borderWidth: 1, //设置外层边框
shadowBlur: 6,
shadowOffsetY: 12,
shadowOffsetX: -5,
shadowColor: "#01012a"
},
emphasis: {
areaColor: "#184cff",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 5,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
series:[
{
type: "map",
map: "china",
roam: false,
zoom: 1.6,
center: [102, 36],
data:[],
// geoIndex: 1,
aspectScale: 0.80, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: "#fff"
}
}
},
itemStyle: {
normal: {
areaColor: "#0d0059",
borderColor: "#389dff",
borderWidth: 0.5
},
emphasis: {
areaColor: "#17008d",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 5,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
myChart.setOption(options);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
initChina(echartData){
let mapDiv = document.getElementById('china_map');
let myChart = echarts.init(mapDiv);
var dataValue = echartData;
var data1 = dataValue.splice(0, 4);
var option = {
series: [
{
type: "map",
map: "china",
roam: false,
zoom: 1.6,
center: [102, 36],
aspectScale: 0.80, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36,83,255,1)'
}, {
offset: 1, color: 'rgba(10,29,255,1)'
}],
global: false
},
borderColor: "#389dff",
borderWidth: 0.5
},
emphasis: {
areaColor: "#17008d",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 5,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: "",
type: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: "circle",
symbolSize: 10,
hoverSymbolSize: 10,
tooltip: {
formatter(value) {
return value.data.name + "
" + "设备数：" + "22";
},
show: true
},
encode: {
value: 2
},
label: {
formatter: "{b}",
position: "right",
show: false
},
itemStyle: {
color: "#e0eb40"
},
emphasis: {
label: {
show: false
}
}
},
//下面是前五产生涟漪动画
{
name: "Top 5",
type: "effectScatter",
coordinateSystem: "geo",
data: data1,
symbolSize: 15,
tooltip: {
formatter(value) {
return value.data.name + "
" + "设备数：" + "22";
},
show: true
},
encode: {
value: 2
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
color: "#e0eb40",
period: 9,
scale: 5
},
hoverAnimation: true,
label: {
formatter: "{b}",
position: "right",
show: true
},
itemStyle: {
color: "#e0eb40",
shadowBlur: 2,
shadowColor: "#333"
},
zlevel: 1
}
]
};
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
<style scoped>
#china_map{
height: 100%;
}
</style>
使用echartChina.vue组件
<template>
<div class="echartChina">
<EchartChina ref="myEchart4"/>
</div>
</template>
<script>
import EchartChina from '@/components/bigEcharts/echartChina'
export default {
data(){
return {
geoCoordMap:{
哈尔滨: [126.63, 45.75],
北京: [116.46, 39.92],
广州: [113.23, 23.16],
上海: [121.48, 31.22],
郑州: [113.65, 34.76],
厦门: [118.1, 24.46],
杭州: [120.19, 30.26],
攀枝花: [101.718637, 26.582347],
东莞: [113.75, 23.04],
广州: [113.23, 23.16],
太原: [112.53, 37.87],
拉萨: [91.11, 29.97],
昆明: [102.73, 25.04],
深圳: [114.07, 22.62],
宿迁: [118.3, 33.96],
佛山: [113.11, 23.05],
海口: [110.35, 20.02],
江门: [113.06, 22.61],
大连: [121.62, 38.92],
沈阳: [123.38, 41.8],
长春: [125.35, 43.88],
吉林: [126.57, 43.87],
宜宾: [104.56, 29.77],
呼和浩特: [111.65, 40.82],
成都: [104.06, 30.67],
桂林: [110.28, 25.29],
齐齐哈尔: [123.97, 47.33],
张家界: [110.479191, 29.117096],
宜兴: [119.82, 31.36],
西安: [108.95, 34.27],
遵义: [106.9, 27.7],
鄂尔多斯: [109.781327, 39.608266],
潍坊: [119.1, 36.62],
徐州: [117.2, 34.26],
衡水: [115.72, 37.72],
乌鲁木齐: [87.68, 43.77],
开封: [114.35, 34.79],
济南: [117, 36.65],
南充: [106.110698, 30.837793],
天津: [117.2, 39.13],
聊城: [115.97, 36.45],
芜湖: [118.38, 31.33],
唐山: [118.02, 39.63],
丽水: [119.92, 28.45],
洛阳: [112.44, 34.7],
秦皇岛: [119.57, 39.95],
株洲: [113.16, 27.83],
石家庄: [114.48, 38.03],
长沙: [113, 28.21],
衢州: [118.88, 28.97],
合肥: [117.27, 31.86],
武汉: [114.31, 30.52],
大庆: [125.03, 46.58]
}
}
},
components:{
EchartChina,
},
mounted(){
const {geoCoordMap} = this
this.initChinaMap(geoCoordMap)
},
methods:{
dealWithData(geoCoordMap) {
var mapData = geoCoordMap
var data = [];
for (var key in mapData) {
data.push({ name: key, value: mapData[key] });
}
return data;
},
initChinaMap(geoCoordMap){
var chinaData = this.dealWithData(geoCoordMap)
this.$nextTick(() => {
this.$refs.myEchart4.initEchartMap()
this.$refs.myEchart4.initChina(chinaData)
})
}
}
}
</script>
<style lang='less' scoped>
.echartChina{
height:100%;
width: 100%;
position: relative;
}
</style>
修改标记图标为图片
...
//引入图片
import gaoji from '@/assets/images/gaoji.png'
import chache from '@/assets/images/chache.png'
...
{
name: "",
type: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: function(value,param){
if(param.data.type == 0){
return "image://" + chache;
}else{
return "image://" + gaoji;
}
},
symbolSize: 20,
hoverSymbolSize: 20,
},