echarts图表实现图片的展示

最新推荐文章于 2024-12-05 16:16:47 发布

奋斗者格洛古

最新推荐文章于 2024-12-05 16:16:47 发布

阅读量1.5k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_57005111/article/details/136897682

版权

本文介绍了如何在ECharts图表中，通过formatter函数和rich对象，实现在坐标轴和series中插入自定义图片，展示了如何设置图片背景和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，需求一，在坐标轴上插入图片展示：利用formatter与rich富文本实现

  yAxis: [{
        axisLabel: {
            formatter: function(value, index) {
                return `{img${index}|}`;
            },
            rich: {
                value: {
                    fontsize: 20
                },
                img0: {
                    height: 32,
                    backgroundColor: {
                        image: require("@/assets/images/newpic/dutyA.png")
                    }
                },
                img1: {
                    height: 32,
                    backgroundColor: {
                       image: require("@/assets/images/newpic/dutyA.png")
                    }
                },
                img2: {
                    height: 32,
                    backgroundColor: {
                        image: require("@/assets/images/newpic/dutyA.png")
                    }
                },
               
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#BCC2CA'
            }
        },
        splitLine: {
            show: false,
        }
    }],