动态修改echarts-gl 3D柱状图柱子颜色的方法
修改方法
拿官网上的一个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
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
