最近的一個需求是一個世界地圖 但是背景不是純色的?
代碼如下：
? ? option 的設(shè)置如下：
? ? dom的設(shè)置請看下面的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:?{
? ? ? ? ? ? ? ? //這里是關(guān)鍵 設(shè)置背景圖片的關(guān)鍵?
????????????????image:?dom, //dom是要填充的背景圖捷凄，
????????????????repeat:?"repeat" //是否要重復(fù)背景
??????????????},
? ? ? ? ? ? ? //這里把邊框顏色設(shè)置沒
??????????????borderColor:?"rgba(255,255,255,0)"
????????????}
??????????},
??????????emphasis:?{
????????????itemStyle:?{
??????????????areaColor:?{
? ? ? ? ? ? ? ? //鼠標(biāo)移到板塊上的狀態(tài)和板塊本來的狀態(tài)設(shè)置為一樣的
????????????????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>
實(shí)現(xiàn)的效果：
