在項目開發過程中，遇到在Echarts圖表上添加背景圖的需求，通過查找Echarts官網的配置項，發現 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

總結

以上是生活随笔為你收集整理的echarts热力背景图_Echarts 图表中设置背景图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。