在項目開發(fā)過程中，遇到在Echarts圖表上添加背景圖的需求，通過查找Echarts官網(wǎng)的配置項，發(fā)現(xiàn) graphic 能夠?qū)崿F(xiàn)在圖表中設(shè)置背景圖片。
graphic配置項： https://echarts.apache.org/zh/option.html#graphic，如下圖所示：
image
在Echarts的實例中，找到一個實例（這里是折線圖）https://echarts.apache.org/examples/zh/editor.html?c=line-simple
image
然后根據(jù)以上的 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', // 根據(jù)父元素進行定位 （居中）
bottom: '0%', // 根據(jù)父元素進行定位 （0%）, 如果bottom的值是 0，也可以刪除該bottom屬性值。
z: 0, // 層疊
bounding: 'all', // 決定此圖形元素在定位時，對自身的包圍盒計算方式
style: {
image: 'https://www.boxuegu.com/assets/user/background1.png', // 這里一定要注意、注意，必須是https開頭的圖片路徑地址
width: 945,
height:800
}
}
],
};
效果圖如下圖右側(cè)所示：
image
over，祝大家新年快樂！
image
