echarts中国地图实现阴影效果&自定义设置
这要实现的重点就是 地图添加底部阴影的效果，原理就是在原有的地图下面再添加一个地图，下面是代码：
html
引入文件
import echarts from 'echarts'
import '@/../node_modules/echarts/map/js/china.js' // 引入中国地图数据
js
chinaConfigure() {
let that = this
const myChart = echarts.init(document.getElementById('myEchart')) // 这里是为了获得容器所在位置
myChart.setOption({ // 进行相关配置
/backgroundColor: '#011456', //设置背景色
tooltip: { // 鼠标移到图里面的浮动提示框
show: false,
transitionDuration: 0
},
// dataRange: { // 地图颜色变化范围设置
// show: true,
// min: 0,
// max: 100,
// text: ['High', 'Low'],
// realtime: true,
// calculable: true,
// color: ['#0D30D4', '#165EE5', '#3D88EA', '#96D7F4']
// },
visualMap: { // 地图标注位置设置和内容设置（图中左下角）
show:true,
left: 60,
bottom: 60,
showLabel:true, // 显示下面属性pieces中的label
textStyle: {
color:'#96D7F4'
},
icon: 'circle', // 标志框形状设置
itemWidth: 5,
itemHeight: 5,
pieces: [ //根据数据大小，各省显示不同颜色
{
lt:5,
label:'<5家',
color: "#96D7F4"
},
{
gte: 5,
lt: 10,
label: "5-10家",
color: "#3D88EA"
},
{
gte: 10,
lt:20,
label: "10-20家",
color: "#165EE5"
},
{
gte: 20,
label: "20家以上",
color: "#0D30D4"
}
]
},
geo: { // 这个是重点 —— 这里设置为地图的阴影
map: 'china', // 表示中国地图
roam: false, // 禁止拖拽
label: { // 标志信息
normal: {
show: false, // 是否显示对应地名
textStyle: {
color:'#CFF6FF'
}
}
},
silent: true, // 禁止hover效果
zoom: 1.1, // 地图比例
center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
itemStyle: {
normal: {
borderColor: 'transparent'
},
emphasis: {
show: false
}
}
},
series: [ // 此处为真正的地图
{
name: '门店区域分布数', // 浮动框的标题
type: 'map',
map: 'china',
zoom: 1.1,
zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
emphasis: { // 鼠标hover是否显示内容，可自己调节
label:{
show:false
},
textStyle: {
color:'#00114F'
}
},
label: { // 地图标注
normal: {
show: true, // 是否显示对应地名
textStyle: {
color:'#CFF6FF'
}
}
},
center: [105.194115019531, 35.582111640625], // 设置地图中心
itemStyle: { // 地图的样式
normal: {
borderColor: '#FFFFFF', // 省份边框颜色
borderWidth: 0.5, // 省份边框宽度
shadowColor:"rgba(100,255,238,0.5)", // 省份边框阴影
shadowBlur: 5, // 省份边框聚焦
},
emphasis: { // 鼠标hover显示
show: false,
areaColor: '#FFFFFF',
color:'#00114F',
textStyle: {
color:'#00114F'
}
}
},
data: this.mapData // 最后数据，下面是假数据
// [
// { name: '广东', value: '150' },
// { name: '江苏', value: '30' },
// { name: '浙江', value: '20' },
// { name: '山东', value: '60' },
// { name: '安徽', value: '5' },
// { name: '湖北', value: '16' },
// { name: '重庆', value: '10' },
// { name: '湖南', value: '55' },
// { name: '河南', value: '11' },
// { name: '北京', value: '22' },
// { name: '天津', value: '22' },
// { name: '上海', value: '71' },
// { name: '河北', value: '4' },
// { name: '云南', value: '115' },
// { name: '辽宁', value: '7' },
// { name: '黑龙江', value: '42' },
// { name: '新疆', value: '22' },
// { name: '江西', value: '11' },
// { name: '广西', value: '33' },
// { name: '甘肃', value: '155' },
// { name: '山西', value: '170' },
// { name: '内蒙古', value: '33' },
// { name: '陕西', value: '85' },
// { name: '吉林', value: '12' },
// { name: '福建', value: '31' },
// { name: '贵州', value: '25' },
// { name: '青海', value: '22' },
// { name: '西藏', value: '61' },
// { name: '四川', value: '2' },
// { name: '宁夏', value: '95' },
// { name: '海南', value: '32' },
// { name: '台湾', value: '42' },
// { name: '香港', value: '36' },
// { name: '澳门', value: '29' },
// { name: '南海诸岛', value: '1' }
// ]
}
]
})
myChart.on('click', function (params) { // 点击每个省份的事件，可用于拓展
console.log(params);
});
window.addEventListener('resize', () => { // 地图自适应缩放
myChart.resize()
})
},