Echarts柱状图-每个柱子都是不同的渐变色

非常简单,直接上代码,修改option->series->bar的配置

 {
    
    
            type: 'bar',
            data: [100, 200, 800, 100],
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
    
    
                color: '#0F173F'
            },
            z: 10,
            label: {
    
    
                show: true,
                position: 'top',
                color: "#fff",
                fontSize: 15,
            },
            itemStyle: {
    
    
                normal: {
    
    
                    //每根柱子颜色设置
                    color: function (params) {
    
    
                        let colorList = [
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    {
    
     offset: 0, color: '#121D30' },                   //柱图渐变色
                                    {
    
     offset: 1, color: '#FA1F2B' },                   //柱图渐变色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    {
    
     offset: 0, color: '#121D30' },                   //柱图渐变色
                                    {
    
     offset: 1, color: '#FFB526' },                   //柱图渐变色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    {
    
     offset: 0, color: '#121D30' },                   //柱图渐变色
                                    {
    
     offset: 1, color: '#28B1FF' },                   //柱图渐变色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    {
    
     offset: 0, color: '#121D30' },                   //柱图渐变色
                                    {
    
     offset: 1, color: '#00E4FF' },                   //柱图渐变色
                                ]
                            )
                        ];
                        return colorList[params.dataIndex];
                    }
                } 
            },
        },

实现的效果为:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41564885/article/details/112801362