Echarts柱状图每个柱子都设置不同的渐变色，达到视觉上的立体效果

最新推荐文章于 2024-08-12 15:05:43 发布
果酱小米粥
最新推荐文章于 2024-08-12 15:05:43 发布
阅读量277
点赞数 2
文章标签： echarts 前端 javascript
本文链接：https://blog.csdn.net/hunantai/article/details/139353780
版权
需要实现的效果：
最终实现效果：
option: {
                title: {
                    text: '陇东页岩油项目状态预警',
                    x: 'center',
                    y: 'top',
                    textStyle: {
                        color: '#098fce',
                        fontSize: '16px'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['参数偏低', '参数偏高', '结蜡', '溶胀', '漏失']
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 3,
                    interval: 0.5
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 50, // 设置柱子的宽度
                        data: [
                            {
                                value: 1,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, 
                                        y: 0, 
                                        x2: 1, 
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#0ec3b7' },   // 左侧颜色
                                            { offset: 0.5, color: '#47efb5' },   // 中间颜色
                                            { offset: 1, color: '#0ec3b7' }  // 右侧颜色，与左侧颜色一致
                                        ],
                                        global: false
                                    },
                                    borderRadius: 7 // 设置柱子圆角
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}'
                                }
                            },
                            {
                                value: 3,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, 
                                        y: 0, 
                                        x2: 1, 
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#f17021' },  // 左侧颜色
                                            { offset: 0.5, color: '#f9d721' },  // 中间颜色
                                            { offset: 1, color: '#f17021' }  // 右侧颜色，与左侧颜色一致
                                        ],
                                        global: false
                                    },
                                    borderRadius: 7
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}'
                                }
                            },
                            {
                                value: 2,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, 
                                        y: 0, 
                                        x2: 1, 
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#216de4' },  // 左侧颜色
                                            { offset: 0.5, color: '#04e2fa' },  // 中间颜色
                                            { offset: 1, color: '#216de4' }  // 右侧颜色，与左侧颜色一致
                                        ],
                                        global: false
                                    },
                                    borderRadius: 7
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}'
                                }
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, 
                                        y: 0, 
                                        x2: 1, 
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#b6a3de' },  // 左侧颜色
                                            { offset: 0.5, color: '#d5cfe4' },  // 中间颜色
                                            { offset: 1, color: '#b6a3de' }  // 右侧颜色，与左侧颜色一致
                                        ],
                                        global: false
                                    },
                                    borderRadius: 7
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}'
                                }
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, 
                                        y: 0, 
                                        x2: 1, 
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#bd203b' },  // 左侧颜色
                                            { offset: 0.5, color: '#e53e5b' },  // 中间颜色
                                            { offset: 1, color: '#bd203b' }  // 右侧颜色，与左侧颜色一致
                                        ],
                                        global: false
                                    },
                                    borderRadius: 7
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}'
                                }
                            },
                        ]
                    }
                ]
            }