有个可视化需求给地图添加纹理,翻了好久没翻到成品,希望这篇文章对后面的人有所帮助吧。
虽然echarts文档里面也有说明,但是echarts文档对一些配置属性确实不敢恭维
实现是以html实现的,vue其实一样的道理,不会差距太大
html代码:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="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 style="background: url(img/bg.png);background-repeat: no-repeat;background-size: 100%;overflow: hidden;">
-
<div style="width: 100%;height: 100vh;" id="map">
</div>
-
<img src="img/1.jpg" id="img1" style="display: none;" />
-
<img src="img/2.jpg" id="img2" style="display: none;" />
-
<img src="img/3.jpg" id="img3" style="display: none;" />
-
<img src="img/4.jpg" id="img4" style="display: none;" />
-
<img src="img/5.jpg" id="img5" style="display: none;" />
-
</body>
-
<script>
-
var myChart = echarts.init(
document.getElementById(
'map'));
-
//通过后台接口返回的数据 value计算取值范围得到5个等级其一 选择img的对应五张图片纹理显示
-
var data = [{
-
name:
"呈贡区",
-
value:
12,
-
itemStyle: {
-
normal: {
-
color: {
-
image:
document.getElementById(
"img1"),
-
repeat:
'repeat'
-
}
-
}
-
}
-
},
-
{
-
name:
"安宁市",
-
value:
12,
-
itemStyle: {
-
normal: {
-
color: {
-
image:
document.getElementById(
"img2"),
-
repeat:
'repeat'
-
}
-
}
-
}
-
},
-
{
-
name:
"安宁市",
-
value:
12,
-
itemStyle: {
-
normal: {
-
color: {
-
image:
document.getElementById(
"img2"),
-
repeat:
'repeat'
-
}
-
}
-
}
-
},
-
{
-
name:
"晋宁区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img3"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"宜良县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img4"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"石林彝族自治县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img5"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"官渡区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img1"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"五华区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img2"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"盘龙区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img3"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"富民县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img3"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"寻甸回族彝族自治县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img5"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"禄劝彝族苗族自治县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img5"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"东川区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img1"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"嵩明县",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img2"),
-
repeat:
'repeat'
-
}
-
}
-
},
-
{
-
name:
"西山区",
-
value:
12,
-
itemStyle: {
-
color: {
-
image:
document.getElementById(
"img3"),
-
repeat:
'repeat'
-
}
-
}
-
}
-
];
-
$.getJSON(
"js/kunmingMap.js",
function(geoJson) {
-
echarts.registerMap(
'昆明', geoJson);
-
let option = {
-
//不触发事件
-
silent:
true,
-
//要显示纹理要关闭这个属性
-
visualMap: {
-
show:
false
-
},
-
//公共的一些设置 我理解为容器
-
geo: {
-
map:
'昆明',
-
aspectScale:
1,
-
roam:
false,
-
itemStyle: {
-
//容器外边框设置
-
normal: {
-
borderColor:
new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
-
offset:
0,
-
color:
'#00F6FF'
-
}, {
-
offset:
1,
-
color:
'#53D9FF'
-
}],
false),
-
borderWidth:
3.5,
//设置外层边框
-
shadowColor:
'rgba(0,54,255, 1)',
-
shadowOffsetY:
0,
-
shadowBlur:
60
-
},
-
//选中状态
-
emphasis: {
-
show:
false
-
}
-
}
-
},
-
//我的理解为每个小区域的容器的公共设置
-
series: [{
-
type:
"map",
-
map:
'昆明',
-
aspectScale:
1,
-
itemStyle:{
-
normal: {
-
borderColor:
'#6FE7FF',
-
borderWidth:
1
-
},
-
emphasis: {
-
show:
false
-
}
-
},
-
label: {
-
normal: {
-
show:
true,
-
fontSize:
12,
-
color:
"#6FE7FF"
-
},
-
emphasis: {
-
color:
'#6FE7FF'
-
}
-
},
-
//每个小区域的独立设置
-
data: data
-
}]
-
};
-
myChart.setOption(option);
-
})
-
</script>
-
</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就行-->这个只是给我提个醒,我怕以后高版本直接不支持了,现在虽然过时,但是还是支持的..无视就好
转载:https://blog.csdn.net/u012169821/article/details/116107536