echarts 柱状图x轴坐标值改为图片，为什么不显示？

发布于 2022-09-12 23:25:42 字数 381 浏览 15 评论 0

需求：项目图标要做成一下x轴坐标值改为自定义图片效果；
问题：为什么我按照以下方法，图片还是不显示？图片路径没有问题，检查很多遍了，同一个页面用了多个图标有冲突，我也注释了其他图标，只留下一个图标，还是不显示，这是为啥？困扰很多天了，请问各位前端大神这是啥原因？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月光色 2022-09-19 23:25:42

用网络图片，写了个demo：

var weatherIcons = {
    'One': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.nosdn.127.net%2FYmieQe6aKgYlbdjmooksj8XJAdgyDe87evgyTzpZ7OU9Q1541644785423.jpg&refer=http%3A%2F%2Fdingyue.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621996435&t=cb31ad3412cf98fb6894210953c8dc67',
    'Two': 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2624116498,626387632&fm=11&gp=0.jpg',
    'Three': 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2473728132,3219483308&fm=26&gp=0.jpg'
};

option = {
    xAxis: {
        type: 'category',
        data: ['One', 'Two', 'Three'],
        axisLabel: {
            formatter: function (value) {
                return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 10,
            rich: {
                value: {
                    lineHeight: 30,
                    align: 'center'
                },
                One: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.One
                    }
                },
                Two: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Two
                    }
                },
                Three: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Three
                    }
                }
            }
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150],
        type: 'bar'
    }]
};