ECharts圖形元素組件（graphic）

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

下面，我們先通過簡單的兩個例子，看看 ECharts 圖形元素組件是如何使用的。

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

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

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

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

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

以下是只搭配一個圖形元素時的簡寫方法：

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

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

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

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

myChart.setOption({
    ...,
    graphic: [
        { // 刪除上例中定義的 'text1' 元素。
            id: 'text1',
            $action: 'remove',
            ...
        },
        { // 將上例中定義的 'rect1' 元素?fù)Q成 circle。
          // 注意盡管 'rect1' 在一個 group 中，但這里并不需要顧忌層級，用id指定就可以了。
            id: 'rect1',
            $action: 'replace',
            type: 'circle',
            ...
        }
    ]
});

注意，如果沒有指定 id，第二次 setOption 時會按照元素在 option 中出現(xiàn)的順序和已有的圖形元素進(jìn)行匹配。這有時會產(chǎn)生不易理解的效果。 所以，一般來說，更新 elements 時推薦使用 id 進(jìn)行準(zhǔn)確的指定，而非省略 id。

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

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

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

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

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

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

    // 這是四個相對于父元素的定位屬性，每個屬性可取『像素值』或者『百分比』或者 '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 會失效。
    },

    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)聽器，還可以是 onmousemove, ondrag 等。支持的事件參見下。
    onclick: function () {...}
}

圖形元素的事件

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

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

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

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

每個圖形元素本身有自己的圖形基本的位置和尺寸設(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 的方式對圖形進(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)的弧度值。正值表示逆時針旋轉(zhuǎn)。
    origin: [10, 20], // 旋轉(zhuǎn)和縮放的中心點(diǎn)，默認(rèn)值為 [0, 0]。
    shape: {
        // ...
    }
}

• 每個圖形元素在父節(jié)點(diǎn)的坐標(biāo)系中進(jìn)行 transform，也就是說父子節(jié)點(diǎn)的 transform 能『疊加』。
• 每個圖形元素進(jìn)行 transform 順序是：平移 [-el.origin[0], -el.origin[1]]。根據(jù) el.scale 縮放。根據(jù) el.rotation 旋轉(zhuǎn)。根據(jù) el.origin 平移。根據(jù) el.position 平移。
• 也就是說先縮放旋轉(zhuǎn)后平移，這樣平移不會影響縮放旋轉(zhuǎn)的 origin。

圖形元素相對定位

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

例如：

{ // 將圖片定位到最下方的中間：
    type: 'image',
    left: 'center', // 水平定位到中間
    bottom: '10%',  // 定位到距離下邊界 10% 處
    style: {
        image: 'http://xxx.xxx.xxx/a.png',
        width: 45,
        height: 45
    }
},
{ // 將旋轉(zhuǎn)過的 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 來設(shè)置是否整體限制在父節(jié)點(diǎn)范圍內(nèi)。

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

graphic.elements[i] 

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

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

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

但是我們常?？梢杂煤唽懀?/p>

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

或者：

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