echarts3D动态柱状图：
动态效果视频：动态效果视频链接
function generateData () {
var data = [];
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 100; j++) {
data.push([i, j * 3.6, Math.floor(Math.random() * 50)]);
}
}
// console.log(data)
return data;
}
var data = generateData();
var phase = ['0', '90', '180', '270', '360'];
var period = ['0', '10', '20', '30', '40', '50']
var option = {
// 标题
title: {
// top:'5%',
text: 'PRPS',
left: 'center',
textStyle:{
color:'#fff',
fontSize:22,
}
},
visualMap: {
show: true,
left: 'right',
top: '5%',
right: 5,
min: -10,
max: 70,
itemWidth:10,
itemHeight:120,
text: ['幅值(dB)'],
textGap: 20, //组件与text之间的距离
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
hoverLink: true, //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
textStyle: {
color: '#fff',
fontSize:12,
},
inRange: {
color: ['#c1da1f', '#bc872a', '#c02221'],
},
},
xAxis3D: {
interval: 10, //坐标轴刻度标签的显示间隔
min: 0,
max: 50,
type: 'value',
name: '周期',
nameTextStyle:{
fontSize:14,
},
nameGap:30,//坐标轴名称与轴线之间的距离
data: period,
axisLine: {
// show: true,
// interval: 5, // (此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
lineStyle: {
color: '#fff',
width: 1,//这里是为了突出显示加上的
},
},
axisLabel: {
show: true,
margin: 8, // x轴的刻度值到x轴的距离
interval: 0, // 可控制坐标轴刻度标签的显示间隔，在类目轴中有效
textStyle: {
color: '#fff'
}
}
},
yAxis3D: {
type: 'value',
name: '相位',
nameTextStyle:{
fontSize:14,
},
nameGap:30,//坐标轴名称与轴线之间的距离
data: phase,
interval: 90, //坐标轴刻度标签的显示间隔
min: 0,
max: 360,
// 坐标轴轴线
axisLine: {
show: true,
// interval: 5, // (此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
lineStyle: {
color: '#fff',
width: 1,//这里是为了突出显示加上的
},
},
// 坐标轴刻度标签
axisLabel: {
show: true,
margin: 6, // y轴的刻度值到y轴的距离
interval: 0, // 可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
formatter: '{value}', // 自定义x轴显示数据标签格式
textStyle: {
color: '#fff'
}
}
},
zAxis3D: {
min: -10, // 最小值
max: 70,
// scale:true,
interval: 20,
type: 'value',
name: '幅值',
nameTextStyle:{
fontSize:14,
},
nameGap:30,//坐标轴名称与轴线之间的距离
axisLine: {
show: true,
interval: 1, // (此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
lineStyle: {
color: '#fff',
width: 1,//这里是为了突出显示加上的
},
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
},
// 三维地理坐标系组件
grid3D: {
axisLine: {
lineStyle: { color: '#fff' }
},
axisPointer: {
show: false, //刻度指示线
lineStyle: { color: '#fff' }
},
// 是否开启视角绕物体的自动旋转查看
viewControl: {
// autoRotate: true, //是否开启视角绕物体的自动旋转查看
beta: 30, //左右旋转角度
alpha: 25, //上下旋转角度
projection: 'perspective', // 先设置为这个perspective
distance: 220, //默认缩放比例
zoomSensitivity: false,//是否开启缩放和平移
rotateSensitivity: false,//是否开启缩放和平移
},
// 光照
light: {
main: {
shadow: true,
quality: 'ultra',
intensity: 1.5 //主光源强度
}
}
},
series: [
{
type: 'bar3D',
barSize: 0.5, // 柱子的粗细
data: data,
shading: 'lambert',
label: {
formatter: function (param) {
return param.value[2].toFixed(1);
}
}
}
]
}
setInterval(function () {
for (var num = 0; num < 5000; num++) {
var tem = data[num][0];
// +10代表增加10个周期
data[num][0] = tem + 10
}
for (var num3 = 0; num3 <= 9; num3++) {
for (var num2 = 0; num2 <= 100; num2++) {
// num2 * 5是因为一周期有100个数但是坐标轴是0--3600，所以一格代表3.6，故乘以3.6
data.unshift([num3, num2 * 3.6, Math.floor(Math.random() * 50)]) //在数组的开头增加元素
data.pop() //删除数组最后一个元素
}
}
myChart.setOption({
series: [
{
type: 'bar3D',
data: data,
}
]
})
}, 2000);