最近搞地球效果试了很多方法,发现了一些好玩的效果
1、echarts图表根据值不同显示不同颜色
echarts有一个visualMap属性,在属性中可以实现根据值的不同,visualMap跟series是同一级别,有很多属性,具体的颜色显示由min,max和数值一起决定
visualMap: {
show: false,//设置为true的时候会显示控制条
min:1,
max: 10,
inRange: {
color: ['rgba(255,109,34,0.8)', 'rgba(255,210,4,0.8)',
'rgba(255,255,0,0.8)', 'rgba(255,255,134,0.8)', 'rgba(255,255,255,0.8)']//color参数可以是#fff格式颜色
}
}
2、添加3D柱状图,并让其发光
在地球上放置柱状图需要配置地球(globe)和柱状图(bar3D)两个信息,柱子本身是不会发光的,所谓的发光效果只能是反射环节光,配置对象中有个shading属性,该属性有三个值:color只显示本身颜色,不受外界光源影响;lambert受光照影响,有光的时候亮,没光线时候暗淡;realistic是真实效果渲染,配合light.ambientCubemap和postEffect可以实现反光,漫反射等效果。
想让柱状图发光,需要把bar3D的shading属性设置为realistic,然后配合地球globe光源来实现。
series:{
type: 'bar3D',
coordinateSystem: 'globe',//该系列使用的坐标系
data: data,//每一项的前两个值分别是经纬度 lng, lat,第三个值表示数值大小,
barSize: 2.0,//柱状图大小
bevelSize:1,//柱子的倒角尺寸
bevelSmoothness:10,//柱子的倒角光滑度
silent: false,//图形是否不响应和触发鼠标事件
shading:"realistic",//着色效果
}
注:柱子默认是长方体,如果想要圆柱,可以通过bevelSize和bevelSmoothness设置。
shading只是让柱状拥有了可以反光的能力,它反射的光源还要通过globe设置。
globe:{
postEffect: {
enable: true,
},
light: {
main: {
intensity: 1,
},
ambient:{
intensity:10,
quality: 'high'
},
ambientCubemap: {
exposure: 1.0,
diffuseIntensity: 2,
specularIntensity:2
}
}
}
最终效果
emphasis:{
label:{
show:true,
//distance:5,
formatter:'我在:{b}',
textStyle:{
fontWeight:'bolder',
fontSize:22,
lineHeight:22,
backgroundColor:"#fff",
padding:[5,15],
borderRadius:5
}
},
},//高亮
echarts可以直接通过on()来绑定事件,事件中携带的参数是事件目标
myChart.on('click', function (param) {//param即为点击目标的信息
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
myChart.setOption({
globe:{
viewControl:{
distance:35,
targetCoord: [param.data.value[0], param.data.value[1]]
}
}
})
setTimeout(function () {
window.open('http://www.baidu.com')
},500)
}
});