美文网首页
Echarts替换x轴数据为图片

Echarts替换x轴数据为图片

作者: Hi小胡 | 来源:发表于2018-02-27 11:23 被阅读17次

效果:

代码:

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轴数据为图片

      本文链接:https://www.haomeiwen.com/subject/ftmpxftx.html