如何使用Echarts实现3D柱状图?
ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以运行在浏览器中,生成各种图形,包括柱状图、折线图、饼图等。在 ECharts 5.0 以后的版本中,增加了对 3D 图形的支持,包括 3D 柱状图。
以下是一个简单的示例,展示如何使用 ECharts 创建一个 3D 柱状图:
// 引入 echarts
var echarts = require('echarts');
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
visualMap: {
show: false,
min: 0,
max: 20,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
xAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis3D: {
type: 'category',
data: ['1', '2', '3', '4', '5']
},
zAxis3D: {
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 3],
[0, 4, 4],
[1, 0, 3],
[1, 1, 3],
[1, 2, 0],
[1, 3, 4],
[1, 4, 2],
[2, 0, 2],
[2, 1, 2],
[2, 2, 5],
[2, 3, 1],
[2, 4, 0],
[3, 0, 1],
[3, 1, 4],
[3, 2, 2],
[3, 3, 5],
[3, 4, 3],
[4, 0, 2],
[4, 1, 1],
[4, 2, 3],
[4, 3, 4],
[4, 4, 5]
],
shading: 'lambert',
label: {
textStyle: {
fontSize: 16
},
formatter: function (params) {
return params.value[2];
}
},
itemStyle: {
opacity: 0.8
},
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这段代码创建了一个 3D 柱状图,xAxis3D
和 yAxis3D
是类别轴,表示柱状图的 x 和 y 方向,zAxis3D
是数值轴,表示柱状图的高度。series
数据中的每一项是一个长度为 3 的数组,分别代表 x、y 坐标和 z 值(即柱子的高度)。你可以根据需要修改这些数据和配置项来满足你的需求。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix