修改方法
拿官网上的一个3D柱状图为例,只需要对它的data稍加改造即可,代码如下:
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var data = [{
// 数据项名称
name: '数据1',
value : [3, 4, 5],
//自定义特殊itemStyle,仅对该item有效
itemStyle:{
color:'#4575b4'
}
},{
// 数据项名称
name: '数据2',
value : [4, 5, 6],
//自定义特殊itemStyle,仅对该item有效
itemStyle:{
color:'#313695'
}
}]
option = {
tooltip: {},
// visualMap: {
// max: 20,
// inRange: {
// color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
// }
// },
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
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: data,
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
}
效果图如下:

官方文档参考:https://echarts.apache.org/zh/option-gl.html#series-bar3D.data
本文介绍如何修改ECharts中的3D柱状图,通过调整数据格式和样式配置实现个性化图表展示。具体包括修改数据源、自定义颜色及增强交互效果等。

3220

被折叠的 条评论
为什么被折叠?



