Echarts图表中设置背景图片

Echarts 图表中设置背景图片

在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片。

graphic配置项: https://echarts.apache.org/zh/option.html#graphic,如下图所示:
《Echarts图表中设置背景图片》
在Echarts的实例中,找到一个实例(这里是折线图)https://echarts.apache.org/examples/zh/editor.html?c=line-simple
《Echarts图表中设置背景图片》

然后根据以上的 graphic的配置,代码配置如下所示:

option = { 
    xAxis: { 
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: { 
        type: 'value'
    },
    series: [{ 
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    graphic: [
        { 
            type: 'image', // 图形元素类型
            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
            right: 'center', // 根据父元素进行定位 (居中)
            bottom: '0%', // 根据父元素进行定位 (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
            z: 0,  // 层叠
            bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
            style: { 
                image: 'https://www.boxuegu.com/assets/user/background1.png', // 这里一定要注意、注意,必须是https开头的图片路径地址
                width: 945,
                height:800
            }
        }
    ],
};

效果图如下图右侧所示:
《Echarts图表中设置背景图片》
over,祝大家新年快乐!

《Echarts图表中设置背景图片》

    原文作者:it筱竹
    原文地址: https://blog.csdn.net/it_cgq/article/details/112042423
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞