echarts柱状图渐变

初级前端工程师毛毛

已于 2024-09-05 11:27:43 修改

阅读量402

点赞数 3

文章标签： echarts

于 2024-09-05 11:26:56 首次发布

本文链接：https://blog.csdn.net/weixin_38891273/article/details/141926494

版权

barChart(){
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['总数量','正常数量','异常数量'],
                    axisLabel: { 
                        textStyle:{
                            color:'#ACCFFF',
                            fontSize: '10px'
                        }
                    },
                    axisLine:{
                        show:true,
                        onZero:true,
                        lineStyle:{
                            color: '#354C71',
                            width: 1,
                            type: 'solid'
                        } 
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { 
                    textStyle:{
                        color:'#ACCFFF',
                        fontSize: '10px'
                    }
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#354C71'
                        }
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed',
                            color:'rgba(172,207,255,0.3)'
                        }
                    },
                },
                series: [{
                    data: [30,25,5],
                    type: 'bar',
                    barWidth: 8,
                    itemStyle: {
                        color: function (params) {
                            const colorsMap = [
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(16,84,194,1)' },
                                        { offset: 0.5, color: 'rgba(16,84,194,0.5)' },
                                        { offset: 1, color: 'rgba(16,84,194,0)' }
                                    ]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(17,198,214,1)' },
                                        { offset: 0.5, color: 'rgba(17,198,214,0.5)' },
                                        { offset: 1, color: 'rgba(17,198,214,0)' }
                                    ]),
                                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(72,87,209,1)' },
                                    { offset: 0.5, color: 'rgba(72,87,209,0.5)' },
                                    { offset: 1, color: 'rgba(72,87,209,0)' }
                                ]),
                            ]
                            return colorsMap[params.dataIndex]
                        }
                    }
                }],
                grid: {
                    top: 10,
                    right: 25,
                    left: 45,
                    bottom: 50,
                },
            };
            option && echarts.init(this.$refs.IPTchart).setOption(option);
        }