echarts lable引入背景图片不生效问题

最新推荐文章于 2024-07-03 16:38:10 发布

原创最新推荐文章于 2024-07-03 16:38:10 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何正确设置图表中标签的背景图片，强调了在配置图片路径时避免使用'image://'前缀的重要性，并给出了具体的代码示例。

//错误的写法（多写了 image:// -_-！）: 👇
//let chartLabelBg = `image://${require('../../../../../assets/images/statistics/bg-label.png')}`;
//正确的写法：👇
let chartLabelBg = `${require('../../../../../assets/images/statistics/bg-label.png')}`;
//切记！！背景图片使用时千万不要在前面加上 image:// 


....省略无用代码
label: {
              show: true,
              position: 'top',
              distance: 20,
              fontSize: 13,
              padding: [8,0,0,0],
              fontWeight: 'bold',
              align: 'center',
              color: 'rgba(63, 40, 0, 1)',
              height: 30,
              width: 59,
              rich: {},//必须写 否则 width、height 不生效
              backgroundColor: {
                //切记: 背景图片地址无需在前面加上 image://
                image: chartLabelBg
              },
            }
...省略无用代码