一、效果
下面以四川省地图为例,展示效果如下:
二、echarts的安装
这里我是使用npm进行安装的,命令如下:
npm install echarts
三、echarts各省份地图js导入
以下是我下载好的各省份的数据,可以直接下载使用,放在项目js文件夹下,在页面内引入。
百度网盘链接:https://pan.baidu.com/s/1BLMQeLWfhHyXEOoE9CiOLA
提取码:rcy5
四、完整代码
扫描二维码关注公众号,回复:
14784802 查看本文章
<template>
<div id="sc-map" ref="mapBox" style="background-color: #ffffff;"></div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 导入echarts地图js
import '@/assets/js/sichuan.js'
export default {
name: 'EchartsMap',
data() {
return {
chart: null,
options: {},
}
},
created() {
this.options = {
// 注释部分是图的标题,按需要进行修改
// title: {
// text: '各区域设备分布情况',
// subtext: '',
// padding: [15, 15],
// textStyle: {
// fontFamily: '宋体',
// fontSize: 16,
// fontWeight: 'normal',
// color: '#55aaff'
// }
// },
series: [
{
map: '四川',
type: 'map',
aspectScale: 0.9,
roam: false,
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
}
},
itemStyle: {
normal: {
// 图形的描边颜色
borderColor: '#55aaff',
// 描边线宽。
borderWidth: 1,
// 柱条的描边类型。
borderType: 'solid',
// 图形的颜色 #233F53
areaColor: '#f1f1f1',
// 图形阴影的模糊大小。
shadowBlur: 5,
// 阴影色 #233F53
shadowColor: '#cecece',
// X轴阴影
shadowOffsetX: 5,
// Y轴阴影
shadowOffsetY: 5,
label: {
// 显示省份下面市、州的名称
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
},
}
},
// 鼠标放上去后,样式改变
emphasis: {
// 图形的描边颜色
borderColor: '#2378f7',
borderWidth: '1',
// 阴影色
areaColor: '#55aaff',
label: {
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
}
}
},
effect: {
show: true,
shadowBlur: 10,
loop: true,
}
},
}
]
};
},
mounted() {
this.chart = echarts.init(this.$refs.mapBox)
this.chart.setOption(this.options)
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
}
}
</script>
<style scoped>
#sc-map{
width: 60%;
height: 600px;
}
</style>
如果要在地图上标点,则需要添加以下:
markPoint: {
// 自定义标记点图标
symbol: 'image://' + require('../assets/img/edit.png'),
// 图标大小
symbolSize: [20, 20],
label: {
position: 'top',
// 数字颜色
color: '#000000'
},
// 数组存放地址坐标,就是上面的标记点
data: [
{ name: '成都市', coord: [102.72,25.05], value: '78' },
]
}