问题形容

抚州市文昌区在临川区外部,导致无奈通过鼠标抉择文昌区。因为将鼠标挪动到文昌区域时,优先是临川区高亮,而文昌区会被笼罩,显示不了。
那如何解决这个问题呢?

解决方案

计划一

设置文昌区的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);

计划三

通过在文昌区加个气泡,而后通过先抉择气泡,而后抉择文昌区。因为抉择其它区域(临川区)时,区域高亮并不会笼罩气泡。