236Echarts - 3D 柱状图(Global Population - Bar3D on Globe)

简介: 236Echarts - 3D 柱状图(Global Population - Bar3D on Globe)
效果图

源代码
$.getJSON("data-gl/asset/data/population.json", function (data) {
    data = data.filter(function (dataItem) {
        return dataItem[2] > 0;
    }).map(function (dataItem) {
        return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
    });
    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: "data-gl/asset/world.topo.bathy.200401.jpg",
            heightTexture: "data-gl/asset/world.topo.bathy.200401.jpg",
            shading: 'lambert',
            environment: 'data-gl/asset/starfield.jpg',
            light: {
                main: {
                    intensity: 2
                }
            },
            viewControl: {
                autoRotate: false
            }
        },
        visualMap: {
            max: 40,
            calculable: true,
            realtime: false,
            inRange: {
                colorLightness: [0.2, 0.9]
            },
            textStyle: {
                color: '#fff'
            },
            controller: {
                inRange: {
                    color: 'orange'
                }
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        series: [{
            type: 'bar3D',
            coordinateSystem: 'globe',
            data: data,
            barSize: 0.6,
            minHeight: 0.2,
            silent: true,
            itemStyle: {
                color: 'orange'
            }
        }]
    };
    myChart.setOption(option);
})
目录
相关文章
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
1803 0
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
4865 0
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
974 0
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1706 0
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
801 0
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
3281 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2542 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章

下一篇
开通oss服务