Echarts 图表中设置背景图片

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

graphic配置项： https://echarts.apache.org/zh/option.html#graphic，如下图所示：

image

在Echarts的实例中，找到一个实例（这里是折线图）https://echarts.apache.org/examples/zh/editor.html?c=line-simple

image

然后根据以上的 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
            }
        }
    ],
};

效果图如下图右侧所示：

image

over，祝大家新年快乐！

image