ecahrts给地图添加贴图纹理

有个可视化需求给地图添加纹理，翻了好久没翻到成品，希望这篇文章对后面的人有所帮助吧。

虽然echarts文档里面也有说明，但是echarts文档对一些配置属性确实不敢恭维

实现是以html实现的，vue其实一样的道理，不会差距太大

html代码：

再单独说明下属性：我理解的属性

geo:整个地图的父级容器,再这里设置一些属性如果后面不对其进行覆盖，就会使用这个对象里面的属性值，可以用来节省一些公关代码和设置外边框

visualMap：这个属性说是什么视觉什么的，看不懂 我只知道删除这个属性，纹理就不会显示了

silent:true 这是取消全局地图事件，因为我这个地图有个BUG  就是鼠标移入会被颜色覆盖，也就是贴图纹理会被覆盖 所以我就干脆取消全局事件

 

最终放上结果图：不喜勿喷，我应该也算这个地图纹理的开荒者吧...

补充下：

1. echarts版本是5.1.0  可以通过echarts.version得到当前框架版本号

2. data中的数据的name必须与地图显示的名字一样  比如安宁市, 如果你地图是显示安宁.那么data的name就得是安宁 可以理解为这是一个映射关系

3. 鼠标移入高亮问题我之前是通过禁用全局事件解决的 但是可以通过一个echarts支持的函数方式解决，这样既不禁用事件，又能解决鼠标移入纹理被覆盖的问题

echarts.on("mouseover", function (params){
    echarts.dispatchAction({
        type: 'downplay'
	});
});

4. vue中使用5.1.0 貌似需要使用下面的方式引入，不然会找不到对象

import * as echarts from 'echarts';

5. echarts的itemStyle的层级、barBorderRaudis属性名在新版本中属于过时状态 浏览器控制台也会提示  itemStyle中的nomal删了就行，直接把color等属性定义在itemStyle下就行，barBorderRaudis改为borderRaudis就行-->这个只是给我提个醒，我怕以后高版本直接不支持了，现在虽然过时，但是还是支持的..无视就好