echart 加载 svg
时间: 2023-10-04 14:12:18 浏览: 87
要在 ECharts 中加载 SVG 图像,可以使用 ECharts 的 image 组件,其中 image 组件支持加载 SVG 图像。
以下是一个加载 SVG 图像的示例:
```javascript
option = {
xAxis: {},
yAxis: {},
series: [{
type: 'line',
data: [1, 3, 2, 4, 5]
}, {
type: 'image',
id: 'logo',
z: -10,
bounding: 'raw',
top: 50,
left: 'center',
style: {
image: 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect x="10" y="10" width="180" height="180" fill="#F00"/><rect x="30" y="30" width="140" height="140" fill="#FFF"/></svg>',
width: 200,
height: 200
}
}]
};
```
在这个示例中,我们定义了一个包含两个系列的 ECharts 配置对象。第一个系列是线图,第二个系列是 image 图,用于加载 SVG 图像。在 image 图的 style 属性中,我们指定了 SVG 图像的 URL,这里使用的是 data URL。在这个 URL 中,我们使用了一个简单的 SVG 图像,其中包含两个矩形,一个红色,一个白色。
通过这种方式,我们就可以在 ECharts 中加载 SVG 图像了。
阅读全文
相关推荐
















