echarts在柱状图轴线上添加图片

在一些柱状图数据比如天气数据、男女比例等信息，在轴线上面加上图片可以更直观的查看数据。

效果图：

image.png

    /**
     * 画轴线带图片的柱状图
     * @param container 容器
     * @param seriesData 图表数据
     */
    function drawImageBar(container, seriesData) {
        var myCharts = echarts.init(document.getElementById(container));
        var myOption = {
                color: ['#7473FF'],
                grid : {
                    left : '4%',
                    right : '4%',
                    bottom : '4%',
                    top : 30,
                    //图形位置包含坐标轴的刻度标签
                    //如果图形位置调整好却不包含坐标轴，坐标轴信息会显示不全
                    containLabel : true
                },
                xAxis: {
                    axisLine : {
                        show : false
                    },
                    splitLine : {
                        show : true,
                        lineStyle: {
                            color: '#1D3039'
                        }
                    },
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    
                },
                yAxis: {
                    type: 'category',
                    data: ['woman', 'man'],
                    //y轴线样式
                    axisLine : {
                        show : false
                    },
                    //设置与x轴平行的线(分割线)不显示
                    splitLine : {
                        show : false,
                    },
                    axisLabel: {//#1D3039
                        formatter: function (value) {
                            console.log(value)
                            return '{' + value + '| }\n{value|' + value + '}';
                        },
                        margin: 20,
                        rich: {
                            value: {
                                lineHeight: 30,
                                align: 'center',
                                color: 'white'
                            },
                            woman: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: './img/woman.png'
                                }
                            },
                            man: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: './img/man.png'
                                }
                            }
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '20',
                        data: seriesData,
                        //柱状图说明信息样式
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                distance: 20,
                                color: 'white',
                                backgroundColor: '#7473FF',
                                padding: 5,
                                borderRadius: 10
                            }
                        },
                    }
                ]
            };
        myCharts.setOption(myOption);

    }

调用方式：

var seriesData = [ {
        value : 55
    }, {
        value : 45
} ];

drawImageBar('bar', seriesData);

在yAxis中有一个rich设置，可以设置y轴的展示方式，比如添加图片等。
其他说明，在series中的label设置中，可以设置柱状图文字说明的样式。