echarts地图背景纹理填充问题,只改变背景颜色,纹理没有填充

以福建省地图为例,正常纹理填充的效果图。

//js 设置图片地址
var picTag = new Image();
picTag.src='xxxx.png';

//图片加载完成后去设置option配置内容,不然图片没加载出来,背景图片没显示出来。

//图片背景设置主要内容
geo: [{
    itemStyle:{
        areaColor:{
            image: picTag,// 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
              repeat: 'repeat' // 是否平铺,可以是
        }
    }
}];


//页面模板放入img标签形式
//<img  src='xxxx.jpg' id="pic">

geo: [{
    itemStyle:{
        areaColor:{
            image: document.getElementById("pic"),// 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
              repeat: 'repeat' // 是否平铺,可以是
        }
    }
}];

纹理填充效果图:

纹理填充出现的问题
最开始测试用4.0.4的版本去配置,纹理填充会填充颜色,但是不会显示纹理---------echart版本问题,版本需要>4.4.0。


可能出现下面这种效果:只有颜色,没有纹理。

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值