ECharts的graphic组件支持多种图形元素，如image、circle等，并可通过设置id、type等属性实现图形元素的创建、更新和删除。图形元素支持事件配置、相对定位和transform变换。group元素可以有子节点，实现共同定位。使用$id$进行精确更新推荐，避免层级匹配导致的复杂情况。
ECharts 图表中原生图形元素组件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的图形元素。这些图形元素如何设置、层级关系如何、相对定位怎么实现，我们在本节内容中会做出介绍。
下面，我们先通过简单的两个例子，看看 ECharts 图形元素组件是如何使用的。
下面示例中，使用图形元素做了水印，和文本块：
下面示例中，使用隐藏的图形元素实现了拖拽：
ECharts 图形元素组件设置介绍
以下是只搭配一个图形元素时的简写方法：myChart.setOption({
...,
graphic: {
type: 'image',
...
}
});
如果要配置多个图形元素，则写法如下：myChart.setOption({
...,
graphic: [
{ // 一个图形元素，类型是 image。
type: 'image',
...
},
{ // 一个图形元素，类型是 text，指定了 id。
type: 'text',
id: 'text1',
...
},
{ // 一个图形元素，类型是 group，可以嵌套子节点。
type: 'group',
children: [
{
type: 'rect',
id: 'rect1',
...
},
{
type: 'image',
...
},
...
]
}
...
]
});
使用 setOption 来删除或更换(替代)已有的图形元素：myChart.setOption({
...,
最低0.47元/天 解锁文章
7268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
