228Echarts - 3D 柱状图(3D Bar with Dataset)

简介: 228Echarts - 3D 柱状图(3D Bar with Dataset)
效果图

源代码
$.get('data/asset/data/life-expectancy-table.json', function (data) {
    option = {
        grid3D: {},
        tooltip: {},
        xAxis3D: {
            type: 'category'
        },
        yAxis3D: {
            type: 'category'
        },
        zAxis3D: {},
        visualMap: {
            max: 1e8,
            dimension: 'Population'
        },
        dataset: {
            dimensions: [
                'Income',
                'Life Expectancy',
                'Population',
                'Country',
                {name: 'Year', type: 'ordinal'}
            ],
            source: data
        },
        series: [
            {
                type: 'bar3D',
                // symbolSize: symbolSize,
                shading: 'lambert',
                encode: {
                    x: 'Year',
                    y: 'Country',
                    z: 'Life Expectancy',
                    tooltip: [0, 1, 2, 3, 4]
                }
            }
        ]
    };
    myChart.setOption(option);
});
目录
相关文章
|
5月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
187 0
|
2月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
97 0
|
3月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
254 0
|
4月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
4月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
52 0
|
5月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
5月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
697 0
|
7天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
2月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
197 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章

下一篇
无影云桌面