graphic

graphic 是原生图形元素组件。可以支持的图形元素包括：

image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

下面示例中，使用图形元素做了水印，和文本块：

下面示例中，使用隐藏的图形元素实现了拖拽：

graphic 设置介绍

只配一个图形元素时的简写方法：

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({
    ...,
    graphic: [
        { // 删除上例中定义的 'text1' 元素。
            id: 'text1',
            $action: 'remove',
            ...
        },
        { // 将上例中定义的 'rect1' 元素换成 circle。
          // 注意尽管 'rect1' 在一个 group 中，但这里并不需要顾忌层级，用id指定就可以了。
            id: 'rect1',
            $action: 'replace',
            type: 'circle',
            ...
        }
    ]
});

注意，如果没有指定 id，第二次 setOption 时会按照元素在 option 中出现的顺序和已有的图形元素进行匹配。这有时会产生不易理解的效果。 所以，一般来说，更新 elements 时推荐使用 id 进行准确的指定，而非省略 id。

图形元素设置介绍

介绍每个图形元素的配置。不同类型的图形元素的设置有这些共性：

{
    // id 用于在更新图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
    id: 'xxx',

    // 这个字段在第一次设置时不能忽略，取值见上方『支持的图形元素』。
    type: 'image',

    // 下面的各个属性如果不需要设置都可以忽略，忽略则取默认值。

    // 指定本次 setOption 对此图形元素进行的操作。默认是 'merge'，还可以 'replace' 或 'remove'。
    $action: 'replace',

    // 这是四个相对于父元素的定位属性，每个属性可取『像素值』或者『百分比』或者 'center'/'middle'。
    left: 10,
    // right: 10,
    top: 'center',
    // bottom: '10%',

    shape: {
        // 定位、形状相关的设置，如 x, y, cx, cy, width, height, r, points 等。
        // 注意，如果设置了 left/right/top/bottom，这里的定位用的 x/y/cx/cy 会失效。
    },

    style: {
        // 样式相关的设置，如 fill, stroke, lineWidth, shadowBlur 等。
    },

    // 表示 z 高度，从而指定了图形元素的覆盖关系。
    z: 10,
    // 表示不响应事件。
    silent: true,
    // 表示节点不显示
    invisible: false,
    // 设置是否整体限制在父节点范围内。可选值：'raw', 'all'。
    bouding: 'raw',
    // 是否可以被拖拽。
    draggable: false,
    // 事件的监听器，还可以是 onmousemove, ondrag 等。支持的事件参见下。
    onclick: function () {...}
}

图形元素的事件

支持这些事件配置： onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop。

图形元素的层级关系

只有 group 元素可以有子节点，从而以该 group 元素为根的元素树可以共同定位（共同移动）。

图形元素的基本形状设置

每个图形元素本身有自己的图形基本的位置和尺寸设置，例如：

{
    type: 'rect',
    shape: {
        x: 10,
        y: 10,
        width: 100,
        height: 200
    }
},
{
    type: 'circle',
    shape: {
        cx: 20,
        cy: 30,
        r: 100
    }
},
{
    type: 'image',
    style: {
        image: 'http://example.website/a.png',
        x: 100,
        y: 200,
        width: 230,
        height: 400
    }
},
{
    type: 'text',
    style: {
        text: 'This text',
        x: 100,
        y: 200
    }

}

图形元素的定位和 transfrom

除此以外，可以以 transform 的方式对图形进行平移、旋转、缩放， 参见：position、rotation、scale、origin。

{
    type: 'rect',
    position: [100, 200], // 平移，默认值为 [0, 0]。
    scale: [2, 4], // 缩放，默认值为 [1, 1]。表示缩放的倍数。
    rotation: Math.PI / 4, // 旋转，默认值为 0。表示旋转的弧度值。正值表示逆时针旋转。
    origin: [10, 20], // 旋转和缩放的中心点，默认值为 [0, 0]。
    shape: {
        // ...
    }
}

每个图形元素在父节点的坐标系中进行 transform，也就是说父子节点的 transform 能『叠加』。

每个图形元素进行 transform 顺序是：

  1. 平移 [-el.origin[0], -el.origin[1]]。
  2. 根据 el.scale 缩放。
  3. 根据 el.rotation 旋转。
  4. 根据 el.origin 平移。
  5. 根据 el.position 平移。

也就是说先缩放旋转后平移，这样平移不会影响缩放旋转的 origin。

图形元素相对定位

以上两者是基本的绝对定位，除此之外，在实际应用中，容器尺寸常常是不确定甚至动态变化的，所以需要提供相对定位的机制。graphic 组件使用 left / right / top / bottom / width / height 提供了相对定位的机制。

例如：

{ // 将图片定位到最下方的中间：
    type: 'image',
    left: 'center', // 水平定位到中间
    bottom: '10%',  // 定位到距离下边界 10% 处
    style: {
        image: 'http://example.website/a.png',
        width: 45,
        height: 45
    }
},
{ // 将旋转过的 group 整体定位右下角：
    type: 'group',
    right: 0,  // 定位到右下角
    bottom: 0, // 定位到右下角
    rotation: Math.PI / 4,
    children: [
        {
            type: 'rect',
            left: 'center', // 相对父元素居中
            top: 'middle',  // 相对父元素居中
            shape: {
                width: 190,
                height: 90
            },
            style: {
                fill: '#fff',
                stroke: '#999',
                lineWidth: 2,
                shadowBlur: 8,
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowColor: 'rgba(0,0,0,0.3)'
            }
        },
        {
            type: 'text',
            left: 'center', // 相对父元素居中
            top: 'middle',  // 相对父元素居中
            style: {
                fill: '#777',
                text: [
                    'This is text',
                    '这是一段文字',
                    'Print some text'
                ].join('\n'),
                font: '14px Microsoft YaHei'
            }
        }
    ]
}

注意，可以用 bounding 来设置是否整体限制在父节点范围内。

所有属性

graphic. id

string

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

 graphic. elements

Array

里面是所有图形元素的集合。

注意：graphic 的标准写法是：

{
    graphic: {
        elements: [
            {type: 'rect', ...}, {type: 'circle', ...}, ...
        ]
    }
}

但是我们常常可以用简写：

{
    graphic: {
        type: 'rect',
        ...
    }
}

或者：

{
    graphic: [
        {type: 'rect', ...}, {type: 'circle', ...}, ...
    ]
}
  graphic. elements-group

Object

group 是唯一的可以有子节点的容器。group 可以用来整体定位一组图形元素。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , ignore , textContent , textConfig , during , draggable , width , height , diffChildrenByName , children , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-image

Object

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-text

Object

文本块。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-rect

Object

矩形。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-circle

Object

圆。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-ring

Object

圆环。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-sector

Object

扇形。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-arc

Object

圆弧。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-polygon

Object

多边形。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-polyline

Object

折线。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-line

Object

直线。

所有属性

{ type , id , $action , x , y , rotation , scaleX , scaleY , originX , originY , transition , enterFrom , leaveTo , enterAnimation , updateAnimation , leaveAnimation , keyframeAnimation , left , right , top , bottom , bounding , z , zlevel , info , silent , invisible , ignore , textContent , textConfig , during , cursor , draggable , progressive , shape , style , focus , blurScope , onclick , onmouseover , onmouseout , onmousemove , onmousewheel , onmousedown , onmouseup , ondrag , ondragstart , ondragend , ondragenter , ondragleave , ondragover , ondrop }

  graphic. elements-bezierCurve

Object

二次或三次贝塞尔曲线。

 graphic.elements-bezierCurve. type = bezierCurve

string

用 setOption 首次设定图形元素时必须指定。 可取值：

image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

 graphic.elements-bezierCurve. id = undefined

string

id 用于在更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。

 graphic.elements-bezierCurve. $action = 'merge'

string

setOption 时指定本次对该图形元素的操作行为。

可取值：

  • 'merge'：如果已有元素，则新的配置项和已有的设定进行 merge。如果没有则新建。
  • 'replace'：如果已有元素，删除之，新建元素替代之。
  • 'remove'：删除元素。
 graphic.elements-bezierCurve. x

number

元素的 x 像素位置。

 graphic.elements-bezierCurve. y

number

元素的 y 像素位置。

 graphic.elements-bezierCurve. rotation

number

元素的旋转

 graphic.elements-bezierCurve. scaleX = 1

number

元素在 x 方向上的缩放。

 graphic.elements-bezierCurve. scaleY = 1

number

元素在 y 方向上的缩放。

 graphic.elements-bezierCurve. originX

number

元素旋转和缩放原点的 x 像素位置。

 graphic.elements-bezierCurve. originY

number

元素旋转和缩放原点的 y 像素位置。

 graphic.elements-bezierCurve. transition

stringArray

可以通过'all'指定所有属性都开启过渡动画，也可以指定单个或一组属性。

Transform 相关的属性：'x'、 'y'、'scaleX'、'scaleY'、'rotation'、'originX'、'originY'。例如：

{
    type: 'rect',
    x: 100,
    y: 200,
    transition: ['x', 'y']
}

还可以是这三个属性 'shape'、'style'、'extra'。表示这三个属性中所有的子属性都开启过渡动画。例如：

{
    type: 'rect',
    shape: { // ... },
    // 表示 shape 中所有属性都开启过渡动画。
    transition: 'shape',
}

在自定义系列中，当 transition 没有指定时，'x' 和 'y' 会默认开启过渡动画。如果想禁用这种默认，可设定为空数组：transition: []

transition 效果参考 例子。

 graphic.elements-bezierCurve. enterFrom

Object

配置图形的入场属性用于入场动画。例如：

{
    type: 'circle',
    x: 100,
    enterFrom: {
        // 淡入
        style: { opacity: 0 },
        // 从左飞入
        x: 0
    }
}
 graphic.elements-bezierCurve. leaveTo

Object

配置图形的退场属性用于退场动画。例如：

{
    type: 'circle',
    x: 100,
    leaveTo: {
        // 淡出
        style: { opacity: 0 },
        // 向右飞出
        x: 200
    }
}
  graphic.elements-bezierCurve. enterAnimation

Object

入场动画配置。

所有属性

{ duration , easing , delay }

  graphic.elements-bezierCurve. updateAnimation

Object

更新属性的动画配置。

所有属性

{ duration , easing , delay }

  graphic.elements-bezierCurve. leaveAnimation

Object

退场动画配置。

所有属性

{ duration , easing , delay }

  graphic.elements-bezierCurve. keyframeAnimation

ObjectArray

关键帧动画配置。支持配置为数组同时使用多个关键帧动画。

示例：

keyframeAnimation: [{
    // 呼吸效果的缩放动画
    duration: 1000,
    loop: true,
    keyframes: [{
        percent: 0.5,
        easing: 'sinusoidalInOut',
        scaleX: 0.1,
        scaleY: 0.1
    }, {
        percent: 1,
        easing: 'sinusoidalInOut',
        scaleX: 1,
        scaleY: 1
    }]
}, {
    // 平移动画
    duration: 2000,
    loop: true,
    keyframes: [{
        percent: 0,
        x: 10
    }, {
        percent: 1,
        x: 100
    }]
}]

假如一个属性同时被应用了关键帧动画和过渡动画，过渡动画会被忽略。

所有属性

{ duration , easing , delay , loop , keyframes }

 graphic.elements-bezierCurve. left = undefined

numberstring

描述怎么根据父元素进行定位。

『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。

值的类型可以是：

  • number：表示像素值。
  • 百分比值：如 '33%'，用父元素的高和此百分比计算出最终值。
  • 'center'：表示自动居中。

left 和 right 只有一个可以生效。

如果指定 left 或 right，则 shape 里的 x、cx 等定位属性不再生效。

 graphic.elements-bezierCurve. right = undefined

numberstring

描述怎么根据父元素进行定位。

『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。

值的类型可以是：

  • number：表示像素值。
  • 百分比值：如 '33%'，用父元素的高和此百分比计算出最终值。
  • 'center'：表示自动居中。

left 和 right 只有一个可以生效。

如果指定 left 或 right，则 shape 里的 x、cx 等定位属性不再生效。

 graphic.elements-bezierCurve. top = undefined

numberstring

描述怎么根据父元素进行定位。

『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。

值的类型可以是：

  • number：表示像素值。
  • 百分比值：如 '33%'，用父元素的宽和此百分比计算出最终值。
  • 'middle'：表示自动居中。

top 和 bottom 只有一个可以生效。

如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。

 graphic.elements-bezierCurve. bottom = undefined

numberstring

描述怎么根据父元素进行定位。

『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。

值的类型可以是：

  • number：表示像素值。
  • 百分比值：如 '33%'，用父元素的宽和此百分比计算出最终值。
  • 'middle'：表示自动居中。

top 和 bottom 只有一个可以生效。

如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。

 graphic.elements-bezierCurve. bounding = 'all'

string

决定此图形元素在定位时，对自身的包围盒计算方式。

参见例子：

可取值：

  • 'all'：（默认） 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。 这种方式易于使整体都限制在父元素范围中。

  • 'raw'： 表示仅仅用自身（不包括子节点）的没经过 transform 的包围盒进行定位。 这种方式易于内容超出父元素范围的定位方式。

 graphic.elements-bezierCurve. z

number

z 方向的高度，决定层叠关系。

 graphic.elements-bezierCurve. zlevel

number

决定此元素绘制在哪个 canvas 层中。注意，越多 canvas 层会占用越多资源。

 graphic.elements-bezierCurve. info

any

用户定义的任意数据，可以在 event listener 中访问，如：

chart.on('click', function (params) {
    console.log(params.info);
});
 graphic.elements-bezierCurve. silent

boolean

是否不响应鼠标以及触摸事件。

 graphic.elements-bezierCurve. invisible

boolean

节点是否可见。

 graphic.elements-bezierCurve. ignore

boolean

节点是否完全被忽略（既不渲染，也不响应事件）。

 graphic.elements-bezierCurve. textContent

Object

这是一个文本定义，附着在一个节点上，会依据 textConfig 配置，相对于节点布局。

里面的属性同于 text。

  graphic.elements-bezierCurve. textConfig

Object

所有属性

{ position , rotation , layoutRect , offset , origin , distance , local , insideFill , insideStroke , outsideFill , outsideStroke , inside }

 graphic.elements-bezierCurve. during

Function

在动画的每一帧里，用户可以使用 during 回调来设定节点的各种属性。

(duringAPI: CustomDuringAPI) => void

interface CustomDuringAPI {
    // 设置 transform 属性值。
    // transform 属性参见 `TransformProp`。
    setTransform(key: TransformProp, val: unknown): void;
    // 获得当前动画帧的 transform 属性值。
    getTransform(key: TransformProp): unknown;
    // 设置 shape 属性值。
    // shape 属性形如：`{ type: 'rect', shape: { xxxProp: xxxValue } }`。
    setShape(key: string, val: unknown): void;
    // 获得当前动画帧的 shape 属性值。
    getShape(key: string): unknown;
    // 设置 style 属性值。
    // style 属性形如：`{ type: 'rect', style: { xxxProp: xxxValue } }`。
    setStyle(key: string, val: unknown): void;
    // 获得当前动画帧的 style 属性值。
    getStyle(key: string): unknown;
    // 设置 extra 属性值。
    // extra 属性形如：`{ type: 'rect', extra: { xxxProp: xxxValue } }`。
    setExtra(key: string, val: unknown): void;
    // 获得当前动画帧的 extra 属性值。
    getExtra(key: string): unknown;
}

type TransformProp =
    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';

在绝大多数场景下，用户不需要这个 during 回调。因为，假如属性被设定到 transition 中后，echarts 会自动对它进行插值，并且基于这些插值形成动画。但是，如果这些插值形成的动画不满足用户需求，那么用户可以使用 during 回调来定制他们。

例如，如果用户使用 polygon 画图形，图形的形状会由 shape.points 来定义，形如：

{
    type: 'polygon',
    shape: {
        points: [[12, 33], [15, 36], [19, 39], ...]
    },
    // ...
}

如果用户指定了 transition 如：

{
    type: 'polygon',
    shape: {
        points: [[12, 33], [15, 36], [19, 39], ...],
    },
    transition: 'shape'
    // ...
}

尽管这些 points 会被 echarts 自动插值，但是这样形成的动画里，这些点会直线走向目标位置。假如用户需求是，这些点要按照某种特定的路径（如弧线、螺旋）来移动，则这就不满足了。所以在这种情况下，可以使用 during 回调如下：

{
    type: 'polygon',
    shape: {
        points: calculatePoints(initialDegree),
        transition: 'points'
    },
    extra: {
        degree: nextDegree
    },
    // 让 echarts 对 `extra.degree` 进行插值，然后基于
    // `extra.degree` 来计算动画中每一帧时的 polygon 形状。
    transition: 'extra',
    during: function (duringAPI) {
        var currentDegree = duringAPI.getExtra('degree');
        duringAPI.setShape(calculatePoints(currentDegree));
    }
    // ...
}

也参见这个 例子。

 graphic.elements-bezierCurve. cursor = 'pointer'

string

鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。

 graphic.elements-bezierCurve. draggable

booleanstring

图形元素是否可以被拖拽。

设置为 true/false 以启用/禁用拖拽，也可以设置为 'horizontal'/'vertical' 限制只允许水平或垂直方向拖拽。

 graphic.elements-bezierCurve. progressive

boolean

是否渐进式渲染。当图形元素过多时才使用。

  graphic.elements-bezierCurve. shape

Object

所有属性

{ x1 , y1 , x2 , y2 , cpx1 , cpy1 , cpx2 , cpy2 , percent , transition }

  graphic.elements-bezierCurve. style

Object

注：关于图形元素中更多的样式设置（例如 富文本标签），参见 zrender/graphic/Displayable 中的 style 相关属性。

注意，这里图形元素的样式属性名称直接源于 zrender，和 echarts label、echarts itemStyle 等处同样含义的样式属性名称或有不同。例如，有如下对应：

所有属性

{ fill , stroke , lineWidth , lineDash , lineDashOffset , lineCap , lineJoin , miterLimit , shadowBlur , shadowOffsetX , shadowOffsetY , shadowColor , opacity , transition }

 graphic.elements-bezierCurve. focus = 'none'

string

从 v5.0.0 开始支持

在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：

  • 'none' 不淡出其它图形，默认使用该配置。
  • 'self' 只聚焦（不淡出）当前高亮的数据的图形。
  • 'series' 聚焦当前高亮的数据所在的系列的所有图形。
 graphic.elements-bezierCurve. blurScope = 'coordinateSystem'

string

从 v5.0.0 开始支持

在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置

  • 'coordinateSystem' 淡出范围为坐标系，默认使用该配置。
  • 'series' 淡出范围为系列。
  • 'global' 淡出范围为全局。
 graphic.elements-bezierCurve. onclick
 graphic.elements-bezierCurve. onmouseover
 graphic.elements-bezierCurve. onmouseout
 graphic.elements-bezierCurve. 
 graphic.elements-bezierCurve. onmousewheel
 graphic.elements-bezierCurve. onmousedown
 graphic.elements-bezierCurve. onmouseup
 graphic.elements-bezierCurve. ondrag
 graphic.elements-bezierCurve. ondragstart
 graphic.elements-bezierCurve. ondragend
 graphic.elements-bezierCurve. ondragenter
 graphic.elements-bezierCurve. ondragleave
 graphic.elements-bezierCurve. ondragover
 graphic.elements-bezierCurve. ondrop 
# echarts # 前端 # javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

AI 协作排查：Vue 项目性能瓶颈定位与解决日志

avatar 2048 AI社区
cover

贾子猜想与 AI 智慧级别的自我定位| Kucius Conjecture and AI‘s Self-Positioning on the Wisdom Scale

avatar 2048 AI社区
cover

MCP图标服务器（进阶版）：一个基于 Model Context Protocol (MCP) 的智能图标搜索工具，专门为AI编程助手（如Cursor、Claude等）设计

avatar 2048 AI社区