动态修改echarts-gl 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
            }
        }
    }]
}
经验分享 程序员 微信小程序 职场和发展