在 ECharts 中，纹理填充可以通过自定义系列（series）的 itemStyle 属性来实现。itemStyle 属性用于设置系列中每个数据项的样式，包括填充颜色、边框颜色、边框线宽等。
纹理填充
// 纹理填充
{
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
如果要用 HTMLImageElement 来作为纹理填充，可以将其作为系列中的 itemStyle 的 pattern 属性。pattern 属性用于设置纹理填充的样式，包括纹理图片、重复方式等。
以下是一个示例代码，演示如何使用 HTMLImageElement 作为纹理填充：
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40],
type: 'bar',
itemStyle: {
normal: {
// 设置纹理填充的样式
pattern: {
// 使用 HTMLImageElement 作为纹理图片
image: new Image(),
// 设置纹理图片的 URL
imageData: 'url(path/to/image.png)'
}
}
}
}]
};
在上述代码中，先定义了一个柱状图系列，并设置了其 itemStyle 的 normal 属性。在 normal 属性中，我们设置了 pattern 属性，并使用 new Image() 创建了一个新的 Image 对象。然后，我们通过 imageData 属性设置了纹理图片的 URL。
需要注意的是，在实际使用中，需要将 imageData 中的 URL 替换为实际的图片路径。此外，如果图片较大或需要进行缩放，可以在 pattern 属性中设置 repeat、width、height 等参数进行进一步的调整。
HTMLImageElement知识说明
HTMLImageElement是HTML DOM中的一个接口，它代表HTML文档中的元素。HTMLImageElement允许您通过JavaScript操作和控制元素，例如设置图像的源URL、宽度、高度和加载等属性。通过HTMLImageElement，您可以动态地更改图像的属性，以实现图像的交互和响应式效果。可以使用以下代码创建HTMLImageElement实例：
var image = new Image();
然后，您可以使用image对象的属性和方法来获取和操作元素。例如，您可以设置图像源URL并将其添加到文档中的某个容器中，如下所示：
image.src = 'image.jpg';
document.getElementById('container').appendChild(image);
此外，HTMLImageElement还提供了一些其他有用的属性和方法，例如width、height、naturalWidth、naturalHeight等，使您可以获取图像的尺寸信息。
@漏刻有时
