Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案

在这里插入图片描述
如图所示:前端设计提供的平面,这里面有两个不常用的功能:(1)y轴刻度标签含有图片;(2)柱图线性渐变。需要对echarts的属性十分熟悉才可以实现,具体操作如下:

(1)解决方案:
yAxis属性添加:

offset:10,
                axisLabel:{
                    formatter: '{value}  {a|}',
                    rich:{
                        a: {
                            backgroundColor: {
                                image: 'images/arrow.png',
                            },
                            height: 26,
                            width:12
                        },
                    },
                    textStyle:{
                        color:'#038deb',
                        fontWeight:'bold',
                        fontSize:16
                    }
                },

(2)线性渐变:
series中添加:

itemStyle:{
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#90071e' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#f75062' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                    }

Done!

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页