问题形容
抚州市文昌区在临川区外部,导致无奈通过鼠标抉择文昌区。因为将鼠标挪动到文昌区域时,优先是临川区高亮,而文昌区会被笼罩,显示不了。
那如何解决这个问题呢?
解决方案
计划一
设置文昌区的zlevel属性,使其值大于其它区域。此时文昌区会处于其它区域的最顶层,即便其它区域高亮时都不会被笼罩,因而能够失常点击,满足要求。
JS次要代码如下:
// 在页面初始化时先加载一下wenchang的地图数据。如果不先加载一遍,则series中wenchang的属性设置不会失效,蕴含zlevel的设置// 思考到这个加载不应该展现给用户,因而通过第二个参数来管制区域的opacity。本次加载opacity设置为0,使得区域不显示that.loadMap('wenchang', true);
loadMap(mapType, hide):
var opacity = 1;if (hide) { opacity = 0;}that.myChart = echarts.init($('#' + that.el)[0]);var seriesItem = { name: "", type: 'map', zoom: 1, // 以后视角的缩放比例 roam: false, // 是否开启平游或缩放 map: mapType, itemStyle: { normal: { areaColor: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: '#4354b6' // 0% 处的色彩 }, { offset: 1, color: '#00b6fe' // 100% 处的色彩 }], globalCoord: false // 缺省为 false }, borderColor: '#2b91b6', borderWidth: 1, shadowColor: '#4354b6', shadowOffsetX: 6, shadowOffsetY: 5, shadowBlur: 3, opacity: opacity }, emphasis: { areaColor: '#2B91B6', color: '#ededec' }, }, // 地市标签字体款式 label: { normal: { show: true, textStyle: { color: "#ffffff", fontSize: 10 } }, emphasis: { color: '#222' } }, data: that.data, zlevel: 1};var series = [seriesItem];// 当加载抚州市地图时,才显示文昌区的区域。其它时候不显示。// 这里设置了left,top的偏移,使得其在正确的地位,否则默认是在整个图的核心显示。并且设置zoom,以便大小适合。如果zoom=1,会填满整个图,不符合要求// 其它区域zlevel=1,这里设置文昌区的zlevel=2,示意在所有其它区域顶层,不被笼罩if (mapType == 'fuzhou') { var wenchang = $.extend({}, seriesItem, { zoom: 0.1, // 以后视角的缩放比例 left: '73', top: '-64', map: 'wenchang', zlevel: 2 }); series.push(wenchang);}var option = { title: { text: '', left: 'left', textStyle: { color: '#FFF', fontSize: 14 }, padding: 10 }, tooltip: { trigger: 'item', showDelay: 0, transitionDuration: 0.2, formatter: function (params) { var value = (params.value + '').split('.'); // console.log(params.value); value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,'); // return params.name + ': ' + value; return params.name; } }, visualMap: { show: false, type: 'continuous', min: 0, max: 1000, range: [0, 1000], x: 'left', y: 'bottom', inRange: { color: ['#a1ddf5', '#1853b1'] }, textStyle: { color: '#FFF', fontSize: 14 }, calculable: true }, series: series};// 留神,必须要加上第二个参数notMerge,为true时示意不与上一次的option合并。// 如果不设置为true,则展现其它区域地图时,wenchang区域呈现过一次之后始终会存在that.myChart.setOption(option, true);
计划二
将文昌区的区域做个偏移,使其不在临川区包围圈内。这个时候,就能够通过鼠标选中了。
// 通过specialAreas设置文昌区的偏移// 留神对象名和地图显示名称统一,这里为'文昌区'var specialAreas = { '文昌区': { // 左上角经度 left: 116.312174, // 左上角纬度 top: 27.954811, // 经度横跨的范畴 width: 0.2 }};echarts.registerMap(mapType, map, specialAreas);
计划三
通过在文昌区加个气泡,而后通过先抉择气泡,而后抉择文昌区。因为抉择其它区域(临川区)时,区域高亮并不会笼罩气泡。