echarts gl在地球上添加发光柱

最新推荐文章于 2025-07-03 14:30:17 发布

原创最新推荐文章于 2025-07-03 14:30:17 发布 · 6.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts gl #发光 #自定义标签 #点击事件

经验专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 ECharts 实现地球上的数据可视化效果，包括根据数据值变化颜色的图表、添加带发光效果的 3D 柱状图等技巧。详细讲述了 visualMap 属性的使用以及柱状图发光效果的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近搞地球效果试了很多方法，发现了一些好玩的效果

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
                }
            }
}

最终效果

在bar3D中自定义标签没有效果，但是可以写到textStyle属性中，就可以生效。

       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)
             }
     });