ecahrts给地图添加贴图纹理 |
您所在的位置：网站首页 › 纹理如何设置 › ecahrts给地图添加贴图纹理 |
ecahrts给地图添加贴图纹理
|
有个可视化需求给地图添加纹理，翻了好久没翻到成品，希望这篇文章对后面的人有所帮助吧。 虽然echarts文档里面也有说明，但是echarts文档对一些配置属性确实不敢恭维 实现是以html实现的，vue其实一样的道理，不会差距太大 html代码： 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); })再单独说明下属性：我理解的属性 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就行-->这个只是给我提个醒，我怕以后高版本直接不支持了，现在虽然过时，但是还是支持的..无视就好 上传了一个html版本的demo，若需要vue版本的，自行更改就行。已经实现过，并不难，按需修改就行 demo下载链接：https://download.csdn.net/download/u012169821/25612191 |
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);
})
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |