天津地图 emphasis 鼠标以上无法正常触发 formatter
其它地图未发现类似情况 , 比如上海,河南,安徽,广东,海口都非常正常
这个代码是在 echarts4+ echarts-gl 里面下载的
配置项如下
var tianjinJSON1 = "/asset/get/s/data-1550740459378-ZEYkl499r.json";
var shanghaiJSON = "/asset/get/s/data-1550735874704-wsXCXiHeo.json";
var echarsjs = "/asset/get/s/data-1550733806050-Jqtyvv2_m.js";
var echarGL = "/asset/get/s/data-1550733815102-tFs7f-GDF.js";
var tianjinJSON = "/asset/get/s/data-1550732847359-Q8CbK2suq.json";
/*
* 问题描述 : 天津地图 emphasis 鼠标以上无法正常触发 formatter
*
* 其它地图未发现类似情况 , 比如上海,河南,安徽,广东,海口都非常正常
* 这个代码是在 echarts4+ echarts-gl 里面下载的
*
* 代码中上传了
* shanghaiJSON 正常
* tianjinJSON 不正常
*/
$.getScript(echarsjs,function(){
$.getScript(echarGL,function(){
console.log("加载js文件");
$.get(tianjinJSON1, function(geoJson) {
var dom = document.getElementById("chart-panel");
var myChart = echarts.init(dom);
console.log('注册地图');
echarts.registerMap('tianjin', geoJson);
option = {
title: {
text: '本市网间话务量热度图',
subtext: '更新周期:5分钟',
x: 'center',
top: "10",
textStyle: {
color: '#90c6ff',
fontSize: 16
}
},
visualMap: [ ],
geo3D: {
map: 'tianjin',
roam: true,
itemStyle: {
color: '#1d5e98',
opacity: 1,
borderWidth: 0.4,
borderColor: '#000'
},
viewControl: { // 用于鼠标的旋转,缩放等视角控制。
projection: 'perspective', // 投影方式,默认为透视投影'perspective',也支持设置为正交投影'orthographic'。
autoRotate: true, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向,也可以取 'ccw',既从上往下看为逆时针方向。
autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒,默认为10 ,也就是36秒转一圈。
autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
damping: 0, // 鼠标进行旋转,缩放等操作时的迟滞因子,在大于等于 1 的时候鼠标在停止操作后,视角仍会因为一定的惯性继续运动(旋转和缩放)。[ default: 0.8 ]
rotateSensitivity: 1, // 旋转操作的灵敏度,值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。rotateSensitivity: [1, 0]——只能横向旋转; rotateSensitivity: [0, 1]——只能纵向旋转。
zoomSensitivity: 1, // 缩放操作的灵敏度,值越大越灵敏。默认为1,设置为0后无法缩放。
panSensitivity: 1, // 平移操作的灵敏度,值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
panMouseButton: 'left', // 平移操作使用的鼠标按键,支持:'left' 鼠标左键(默认);'middle' 鼠标中键 ;'right' 鼠标右键(注意:如果设置为鼠标右键则会阻止默认的右键菜单。)
rotateMouseButton: 'left', // 旋转操作使用的鼠标按键,支持:'left' 鼠标左键;'middle' 鼠标中键(默认);'right' 鼠标右键(注意:如果设置为鼠标右键则会阻止默认的右键菜单。)
distance: 135, // [ default: 100 ] 默认视角距离主体的距离,对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。数小就大
minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
alpha: 40, // 视角绕 x 轴,即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 15, // 视角绕 y 轴,即左右旋转的角度。[ default: 0 ]
minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
center: [0,0,0], // 视角中心点,旋转也会围绕这个中心点旋转,默认为[0,0,0]。
animation: true, // 是否开启动画。[ default: true ]
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
},
label: {
show: true,
textStyle: {
color: '#FFF', //地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0)'
},formatter:function(item){
return item.name+ '-L' ;
}
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'rgba(0,23,11,0)'
},formatter:function(item) {
return item.name +'E';
}
}
},
//shading: 'lambert',
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: false, //是否显示阴影
alpha:55,
beta:10
},
ambient: {
intensity: 0.3
}
}
}
};
myChart.setOption(option);
})
});
});