![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
echarts设置geo地图背景图片
2.把图片放在echarts配置项里。
·
1.获取图片
var img = require('./imgs/main_bg.png')
var domImg = document.createElement("img");
domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px";
domImg.src = img
2.把图片放在echarts配置项里
geo: {
show: true, // 是否显示 ECharts 地理坐标系组件
map: 'china', // 地理坐标系组件的地图类型
roam: false, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签
normal: {
show: false, // 是否显示标签
textStyle: { // 标签字体样式
color: "#000" // 标签字体颜色
}
},
emphasis: {
show: false,
}
},
itemStyle: {
areaColor: {
type: "pattern",
image: domImg, //配置图片
repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
},
borderColor: `#16ecfc`,
borderWidth: 1,
shadowBlur: 6,
shadowOffsetY: 0,
shadowOffsetX: 0,
shadowColor: `#16ecfc`,
emphasis: {
areaColor: `rgba(63, 218, 255, 0.1)`,
opacity:0.4,
label: {
color: `#fff`
}
}
},
center:[104.5, 36.263161],
zoom:1,
layoutCenter: ['50%', '40%'],
layoutSize: '100%',
},
更多推荐
所有评论(0)