Set background image in Echarts chart

Set background image in Echarts chart

During the project development process, I encountered the need to add a background image to the Echarts chart. By searching the configuration items on the Echarts official website, I found that the graphic can implement the setting of the background image in the chart.

Graphic configuration item: https://echarts.apache.org/zh/option.html#graphic , as shown in the following figure:

In the instance of Echarts, find an instance (here is a line chart) https://echarts.apache. org/examples/zh/editor.html?c=line-simple

Then according to the above graphic configuration, the code configuration is as follows:

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
            }
        }
    ],
};

The effect picture is shown on the right side of the picture below:

over, I wish you all a happy new year!