最近的一个需求是一个世界地图 但是背景不是纯色的
代码如下：
option 的设置如下：
dom的设置请看下面的template部分代码
var dom = this.$refs["image"];
let data = this.dots.map(item => {
return {
name: item,
value: geoCoordMap[item]
};
});
this.myChart = this.$echarts.init(this.$refs["world"]);
var option = {
geo: {
id: "map",
type: "map",
geoIndex: "1",
zoom: 1.2,
map: "world",
itemStyle: {
normal: {
areaColor: {
//这里是关键 设置背景图片的关键
image: dom, //dom是要填充的背景图，
repeat: "repeat" //是否要重复背景
},
//这里把边框颜色设置没
borderColor: "rgba(255,255,255,0)"
}
},
emphasis: {
itemStyle: {
areaColor: {
//鼠标移到板块上的状态和板块本来的状态设置为一样的
image: dom,
repeat: "repeat"
}
},
label: {
show: false
}
}
}，
};
this.myChart.setOption(option);
template部分代码如下
<div>
<img ref="image" v-show="false" src="../../../../../public/static/images/worldbg.png" alt />
<div ref="world" class="world" style="width:100%;height:400px" v-onEchantResize></div>
</div>
实现的效果：
