Echarts替换x轴数据为图片

效果:

代码:

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'
                }
            }
        }
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容