Echarts替换x轴数据为图片

效果:

Echarts替换x轴数据为图片_第1张图片
Echarts替换x轴数据为图片_第2张图片
Echarts替换x轴数据为图片_第3张图片

代码:

xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
    axisLabel: {
        show: true,
        formatter: function(value) {
            return '{' + value + '| }';
        },
        rich: {
            value: {
                lineHeight: 30,
                align: 'center'
            },
            "a": {
                width: 90,
                height: 55,
                align: 'center',
                backgroundColor: {
                    image: './img/dianli.png'
                }
            },
            "b": {
                width: 90,
                height: 55,
                align: 'center',
                backgroundColor: {
                    image: './img/yiliao.png'
                }
            },
            "c": {
                width: 100,
                height: 50,
                align: 'center',
                backgroundColor: {
                    image: './img/hulianwang.png'
                }
            },
            "d": {
                width: 90,
                height: 55,
                align: 'center',
                backgroundColor: {
                    image: './img/jiaotong.png'
                }
            },
            "e": {
                width: 100,
                height: 50,
                align: 'center',
                backgroundColor: {
                    image: './img/yunying.png'
                }
            },
            "f": {
                width: 90,
                height: 55,
                align: 'center',
                backgroundColor: {
                    image: './img/jinrong.png'
                }
            }
        }
    }
}

你可能感兴趣的:(Echarts替换x轴数据为图片)