ecahrts给地图添加贴图纹理
有个可视化需求给地图添加纹理，翻了好久没翻到成品，希望这篇⽂章对后⾯的⼈有所帮助吧。
虽然echarts⽂档⾥⾯也有说明，但是echarts⽂档对⼀些配置属性确实不敢恭维
实现是以html实现的，vue其实⼀样的道理，不会差距太⼤
html代码：
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8" />
<title></title>
<script type="application/javascript" src="js/echarts.js"></script>
<script type="application/javascript" src="js/jquery.min.js"></script>
</head>
<body > <div id="map"></div>
<img src="img/1.jpg" id="img1" />
<img src="img/2.jpg" id="img2" />
<img src="img/3.jpg" id="img3" />
<img src="img/4.jpg" id="img4" />
<img src="img/5.jpg" id="img5" />
</body>
<script>
var myChart = echarts.ElementById('map'));
//通过后台接⼝返回的数据 value计算取值范围得到5个等级其⼀选择img的对应五张图⽚纹理显⽰
var data = [{
name: "呈贡区",
value: 12,
itemStyle: {
normal: {
color: {
image: ElementById("img1"),
repeat: 'repeat'
}
}
}
},
{
name: "安宁市",
value: 12,
itemStyle: {
normal: {
color: {
image: ElementById("img2"),
repeat: 'repeat'
}
}
}
如何提升气质
},
{
name: "安宁市",
value: 12,
itemStyle: {
normal: {
color: {
image: ElementById("img2"),
repeat: 'repeat'
}
}
}
},
},
{
name: "晋宁区",
value: 12,
itemStyle: {
color: {
image: ElementById("img3"), repeat: 'repeat'
}
}
},举世闻名是什么意思
{
name: "宜良县",
value: 12,
itemStyle: {
color: {
image: ElementById("img4"), repeat: 'repeat'
}
}
},
{
name: "⽯林彝族⾃治县",
value: 12,
itemStyle: {
color: {
image: ElementById("img5"), repeat: 'repeat'
}
}
},
{
name: "官渡区",
value: 12,
itemStyle: {
color: {
image: ElementById("img1"), repeat: 'repeat'
}
}
},
{
name: "五华区",七的寓意
value: 12,
itemStyle: {
color: {
image: ElementById("img2"), repeat: 'repeat'
}
}
},
{
name: "盘龙区",
value: 12,
itemStyle: {
color: {
image: ElementById("img3"), repeat: 'repeat'
}
}
},
{
name: "富民县",
value: 12,
itemStyle: {
color: {
color: {
image: ElementById("img3"),
repeat: 'repeat'
}
}
},
{
name: "寻甸回族彝族⾃治县",
value: 12,
itemStyle: {
color: {
image: ElementById("img5"),
repeat: 'repeat'
}
为什么孕酮低}
},
{
name: "禄劝彝族苗族⾃治县",
value: 12,
itemStyle: {
color: {
image: ElementById("img5"),
repeat: 'repeat'
}
}
招聘标语},
{
name: "东川区",
value: 12,
itemStyle: {
color: {
image: ElementById("img1"),
repeat: 'repeat'
}
}
},
{
name: "嵩明县",
value: 12,
石油大学itemStyle: {
color: {
image: ElementById("img2"),
repeat: 'repeat'
}
}
},
{
name: "西⼭区",
value: 12,
itemStyle: {
color: {
image: ElementById("img3"),
repeat: 'repeat'
}
}
}
];
$.getJSON("js/kunmingMap.js", function(geoJson) { isterMap('昆明', geoJson);
let option = {
西施捧心//不触发事件
silent:true,
//要显⽰纹理要关闭这个属性
visualMap: {
show: fal
},
},
//公共的⼀些设置我理解为容器
geo: {
map: '昆明',
人生大事观后感aspectScale: 1,
roam: fal,
itemStyle: {
//容器外边框设置
normal: {
borderColor: aphic.LinearGradient(0, 0, 0, 1, [{
offt: 0,
color: '#00F6FF'
}, {
offt: 1,
color: '#53D9FF'
}], fal),
borderWidth: 3.5, //设置外层边框
shadowColor: 'rgba(0,54,255, 1)',
shadowOfftY: 0,
shadowBlur: 60
},
//选中状态
emphasis: {
show:fal
}
}
},
//我的理解为每个⼩区域的容器的公共设置
ries: [{
type: "map",
map: '昆明',
aspectScale: 1,
itemStyle:{
normal: {
borderColor: '#6FE7FF',
borderWidth: 1
},
emphasis: {
show:fal
}
},
label: {
normal: {
show: true,
fontSize: 12,
color: "#6FE7FF"
},
emphasis: {
color: '#6FE7FF'
}
},
//每个⼩区域的独⽴设置
data: data
}]
};
myChart.tOption(option);
})
</script>
</html>
再单独说明下属性：我理解的属性
geo：整个地图的⽗级容器，再这⾥设置⼀些属性如果后⾯不对其进⾏覆盖，就会使⽤这个对象⾥⾯的属性值，可以⽤来节省⼀些公关代码和设置外边框
visualMap：这个属性说是什么视觉什么的，看不懂 我只知道删除这个属性，纹理就不会显⽰了
silent:true 这是取消全局地图事件，因为我这个地图有个BUG 就是⿏标移⼊会被颜⾊覆盖，也就是贴图纹理会被覆盖 所以我就⼲脆取消全局事件
最终放上结果图：不喜勿喷，我应该也算这个地图纹理的开荒者吧...
补充下：
1. echarts版本是5.1.0 可以通过echarts.version得到当前框架版本号
2. data中的数据的name必须与地图显⽰的名字⼀样 ⽐如安宁市, 如果你地图是显⽰安宁.那么data的name就得是安宁 可以理解为这是⼀个映射关系
3. ⿏标移⼊⾼亮问题我之前是通过禁⽤全局事件解决的 但是可以通过⼀个echarts⽀持的函数⽅式解决，这样既不禁⽤事件，⼜能解决⿏标移⼊纹理被覆盖的问题
<("mouover", function (params){
echarts.dispatchAction({
type: 'downplay'
});
});
4. vue中使⽤
5.1.0 貌似需要使⽤下⾯的⽅式引⼊，不然会找不到对象
