ECharts圖形元素組件（graphic）

2018-10-11 10:37 更新

ECharts 圖表中原生圖形元素組件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的圖形元素。這些圖形元素如何設(shè)置、層級(jí)關(guān)系如何、相對(duì)定位怎么實(shí)現(xiàn)，我們?cè)诒竟?jié)內(nèi)容中會(huì)做出介紹。

下面，我們先通過(guò)簡(jiǎn)單的兩個(gè)例子，看看 ECharts 圖形元素組件是如何使用的。

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

ECharts使用圖形元素制作水印

點(diǎn)擊編輯實(shí)例 》》

下面示例中，使用隱藏的圖形元素實(shí)現(xiàn)了拖拽：

ECharts使用圖形元素實(shí)現(xiàn)拖拽

點(diǎn)擊編輯實(shí)例 》》

ECharts 圖形元素組件設(shè)置介紹

以下是只搭配一個(gè)圖形元素時(shí)的簡(jiǎn)寫方法：

myChart.setOption({
    ...,
    graphic: {
        type: 'image',
        ...
    }
});

如果要配置多個(gè)圖形元素，則寫法如下：

myChart.setOption({
    ...,
    graphic: [
        { // 一個(gè)圖形元素，類型是 image。
            type: 'image',
            ...
        },
        { // 一個(gè)圖形元素，類型是 text，指定了 id。
            type: 'text',
            id: 'text1',
            ...
        },
        { // 一個(gè)圖形元素，類型是 group，可以嵌套子節(jié)點(diǎn)。
            type: 'group',
            children: [
                {
                    type: 'rect',
                    id: 'rect1',
                    ...
                },
                {
                    type: 'image',
                    ...
                },
                ...
            ]
        }
        ...
    ]
});

使用 setOption 來(lái)刪除或更換（替代）已有的圖形元素：

myChart.setOption({
    ...,
    graphic: [
        { // 刪除上例中定義的 'text1' 元素。
            id: 'text1',
            $action: 'remove',
            ...
        },
        { // 將上例中定義的 'rect1' 元素?fù)Q成 circle。
          // 注意盡管 'rect1' 在一個(gè) group 中，但這里并不需要顧忌層級(jí)，用id指定就可以了。
            id: 'rect1',
            $action: 'replace',
            type: 'circle',
            ...
        }
    ]
});
注意，如果沒(méi)有指定 id，第二次 setOption 時(shí)會(huì)按照元素在 option 中出現(xiàn)的順序和已有的圖形元素進(jìn)行匹配。這有時(shí)會(huì)產(chǎn)生不易理解的效果。 所以，一般來(lái)說(shuō)，更新 elements 時(shí)推薦使用 id 進(jìn)行準(zhǔn)確的指定，而非省略 id。

圖形元素設(shè)置介紹

介紹每個(gè)圖形元素的配置。不同類型的圖形元素的設(shè)置有以下這些共性：

{
    // id 用于在更新圖形元素時(shí)指定更新哪個(gè)圖形元素，如果不需要用可以忽略。
    id: 'xxx',

    // 這個(gè)字段在第一次設(shè)置時(shí)不能忽略，取值見(jiàn)上方『支持的圖形元素』。
    type: 'image',

    // 下面的各個(gè)屬性如果不需要設(shè)置都可以忽略，忽略則取默認(rèn)值。

    // 指定本次 setOption 對(duì)此圖形元素進(jìn)行的操作。默認(rèn)是 'merge'，還可以 'replace' 或 'remove'。
    $action: 'replace',

    // 這是四個(gè)相對(duì)于父元素的定位屬性，每個(gè)屬性可取『像素值』或者『百分比』或者 'center'/'middle'。
    left: 10,
    // right: 10,
    top: 'center',
    // bottom: '10%',

    shape: {
        // 定位、形狀相關(guān)的設(shè)置，如 x, y, cx, cy, width, height, r, points 等。
        // 注意，如果設(shè)置了 left/right/top/bottom，這里的定位用的 x/y/cx/cy 會(huì)失效。
    },

    style: {
        // 樣式相關(guān)的設(shè)置，如 fill, stroke, lineWidth, shadowBlur 等。
    },

    // 表示 z 高度，從而指定了圖形元素的覆蓋關(guān)系。
    z: 10,
    // 表示不響應(yīng)事件。
    silent: true,
    // 表示節(jié)點(diǎn)不顯示
    invisible: false,
    // 設(shè)置是否整體限制在父節(jié)點(diǎn)范圍內(nèi)?？蛇x值：'raw', 'all'。
    bouding: 'raw',
    // 是否可以被拖拽。
    draggable: false,
    // 事件的監(jiān)聽(tīng)器，還可以是 onmousemove, ondrag 等。支持的事件參見(jiàn)下。
    onclick: function () {...}
}

圖形元素的事件

ECharts 圖形元素支持這些事件配置： onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop。

圖形元素的層級(jí)關(guān)系

只有 group 元素可以有子節(jié)點(diǎn)，從而以該 group 元素為根的元素樹(shù)可以共同定位（共同移動(dòng)）。

圖形元素的基本形狀設(shè)置

每個(gè)圖形元素本身有自己的圖形基本的位置和尺寸設(shè)置，例如：

{
    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://xxx.xxx.xxx/a.png',
        x: 100,
        y: 200,
        width: 230,
        height: 400
    }
},
{
    type: 'text',
    style: {
        text: 'This text',
        x: 100,
        y: 200
    }

}

圖形元素的定位和 transfrom

除此以外，可以以 transform 的方式對(duì)圖形進(jìn)行平移、旋轉(zhuǎn)、縮放，

{
    type: 'rect',
    position: [100, 200], // 平移，默認(rèn)值為 [0, 0]。
    scale: [2, 4], // 縮放，默認(rèn)值為 [1, 1]。表示縮放的倍數(shù)。
    rotation: Math.PI / 4, // 旋轉(zhuǎn)，默認(rèn)值為 0。表示旋轉(zhuǎn)的弧度值。正值表示逆時(shí)針旋轉(zhuǎn)。
    origin: [10, 20], // 旋轉(zhuǎn)和縮放的中心點(diǎn)，默認(rèn)值為 [0, 0]。
    shape: {
        // ...
    }
}
  • 每個(gè)圖形元素在父節(jié)點(diǎn)的坐標(biāo)系中進(jìn)行 transform，也就是說(shuō)父子節(jié)點(diǎn)的 transform 能『疊加』。
  • 每個(gè)圖形元素進(jìn)行 transform 順序是：平移 [-el.origin[0], -el.origin[1]]。根據(jù) el.scale 縮放。根據(jù) el.rotation 旋轉(zhuǎn)。根據(jù) el.origin 平移。根據(jù) el.position 平移。
  • 也就是說(shuō)先縮放旋轉(zhuǎn)后平移，這樣平移不會(huì)影響縮放旋轉(zhuǎn)的 origin。

圖形元素相對(duì)定位

以上兩者是基本的絕對(duì)定位，除此之外，在實(shí)際應(yīng)用中，容器尺寸常常是不確定甚至動(dòng)態(tài)變化的，所以需要提供相對(duì)定位的機(jī)制。graphic 組件使用 left / right / top / bottom / width / height 提供了相對(duì)定位的機(jī)制。

例如：

{ // 將圖片定位到最下方的中間：
    type: 'image',
    left: 'center', // 水平定位到中間
    bottom: '10%',  // 定位到距離下邊界 10% 處
    style: {
        image: 'http://xxx.xxx.xxx/a.png',
        width: 45,
        height: 45
    }
},
{ // 將旋轉(zhuǎn)過(guò)的 group 整體定位右下角：
    type: 'group',
    right: 0,  // 定位到右下角
    bottom: 0, // 定位到右下角
    rotation: Math.PI / 4,
    children: [
        {
            type: 'rect',
            left: 'center', // 相對(duì)父元素居中
            top: 'middle',  // 相對(duì)父元素居中
            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', // 相對(duì)父元素居中
            top: 'middle',  // 相對(duì)父元素居中
            style: {
                fill: '#777',
                text: [
                    'This is text',
                    '這是一段文字',
                    'Print some text'
                ].join('\n'),
                font: '14px Microsoft YaHei'
            }
        }
    ]
}
注意，可以用 bounding 來(lái)設(shè)置是否整體限制在父節(jié)點(diǎn)范圍內(nèi)。

下面是詳細(xì)配置。

graphic.elements[i] 

里面包含所有圖形元素的集合。

注意：graphic 的標(biāo)準(zhǔn)寫法是：

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

但是我們常?？梢杂煤?jiǎn)寫：

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

或者：

{
    graphic: [
        {type: 'rect', ...}, {type: 'circle', ...}, ...
    ]
}
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)