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设置中，可以设置柱状图文字说明的样式。