Echarts graphic原生圖形元素組件

時間 2019-11-08

原文原文鏈接

前面的文章介紹了Echarts通用配置項，這篇文章進入第二個主題介紹：Echarts graphic原生圖形元素組件。segmentfault

graphic 是原生圖形元素組件。能夠支持的圖形元素包括：
Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。這篇文章分別介紹graphic的通用設置，以及通用事件，接下來會分別介紹每種圖形的繪製方法。數組

1、graphic的通用配置

{
    // 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 () {...}
}

2、graphic的通用事件

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

3、繪製方法

按照形狀的類別，把這些分爲六類。spa

一、Image

Image: 圖形code

Demo:orm

Code:blog

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'image',
        id: 'logo',
        right: 20,
        top: 20,
        z: -10,
        //'all'：（默認） 表示用自身以及子節點總體的通過 transform 後的包圍盒進行定位。 這種方式易於使總體都限制在父元素範圍中。
       //'raw'： 表示僅僅用自身（不包括子節點）的沒通過 tranform 的包圍盒進行定位。 這種方式易於內容超出父元素範圍的定位方式。
        bounding: 'raw',
        origin: [75, 75],
        style: {
            image: 'http://echarts.baidu.com/images/favicon.png',
            width: 150,
            height: 150,
            opacity: 0.4
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

二、Group, Rect, Text

Group: 組，把各個元素都包起來
Rect: 矩形，繪製矩形就是指定寬度，高度
Text: 文案seo

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: [
        {
            type: 'group',
            rotation: Math.PI / 4,
            bounding: 'raw',
            right: 110,
            bottom: 110,
            z: 100,
            children: [
                {
                    type: 'rect',
                    left: 'center',
                    top: 'center',
                    z: 100,
                    shape: {
                        width: 400,
                        height: 50
                    },
                    style: {
                        fill: 'rgba(0,0,0,0.3)'
                    }
                },
                  {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    z: 100,
                    style: {
                        fill: '#fff',
                        text: 'ECHARTS BAR CHART',
                        font: 'bold 26px Microsoft YaHei'
                    }
                }
            ]
        },
        {
            type: 'group',
            left: '10%',
            top: 'center',
            children: [
                {
                    type: 'rect',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    shape: {
                        width: 190,
                        height: 90
                    },
                    style: {
                        fill: '#fff',
                        stroke: '#555',
                        lineWidth: 2,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                },
                  {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        fill: '#333',
                        text: [
                            '橫軸表示溫度，單位是°C',
                            '縱軸表示高度，單位是km',
                            '右上角有一個圖片作的水印',
                            '這個文本塊能夠放在圖中各',
                            '種位置'
                        ].join('\n'),
                        font: '14px Microsoft YaHei'
                    }
                }
            ]
        }
    ],
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

三、Circle, Ring, Sector，Arc

先介紹幾個概念：
Circle: 圓形，這個無需多介紹
Ring: 戒指，這裏表明雙圓
Sector: 扇形，扇形是圓的一部分，扇形是一條弧和通過這條弧兩端的兩條半徑所圍成的圖形, 是封閉的
Arc: 弧形, 弧形只是一段曲線，不是封閉圖形
繪製圓，通常須要知道圓心的座標，圓的半徑就能夠，Ring，Sector, Arc 比Circle多了一個屬性r0(裏圓的半徑)事件

Circle Demo:圖片

Circle Code：

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'circle',
        id: 'circle',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            cx: 50,
            cy: 50,
            r: 50
        },
        style: {
            fill: '#fff',
            stroke: 'red'
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

Ring Demo:

Ring Code:

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
        type: 'ring',
        id: 'ring',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            cx: 50,
            cy: 50,
            r: 50,
            r0: 20,
        },
        style: {
            fill: '#fff',
            stroke: 'red',
            lineWidth: 1
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

Sector Demo:

Sector Code:

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
        type: 'sector',
        id: 'sector',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            cx: 50,
            cy: 50,
            r: 50,
            r0: 20,
            //startAngle: 0,
            //endAngle: Math.PI * 2,
            //clockwise: true
        },
        style: {
            fill: '#fff',
            stroke: 'red',
            lineWidth: 1
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

Arc的shape寫法與Sector的寫法類似，這裏很少介紹了。

四、Polygon, Polyline

Polygon：顧明思議就是多邊形
Polyline：也就是多條線，
多邊形實際上是能夠畫任意形狀，他的shape是一個數組，[[10, 20], [20, 30]..]只要指定好座標就能夠了。Polyline跟Polygon的主要區別就是結尾是否鏈接起來。

Polygon Demo：

Polygon Code：

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'polygon',
        id: 'polygon',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            points: [[22, 44], [44, 55], [11, 44],  [80, 90]]
        },
        style: {
            fill: '#fff',
            stroke: 'red'
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

Polyline Demo:

Polyline Code:

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'polyline',
        id: 'polyline',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            points: [[22, 44], [44, 55], [11, 44],  [80, 90]]
        },
        style: {
            fill: '#fff',
            stroke: 'red'
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

五、Line

Line 線，通常繪製一條線，告訴開始座標，結束座標就能把線繪製出來。咱們看看下面的實例：
Line Demo:

Line Code:

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'line',
        id: 'line',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            x1: 50,
            y1: 100,
            x2: 80,
            y2: 300
        },
        style: {
            fill: '#fff',
            stroke: 'blue'
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

六、BezierCurve

BezierCurve: 貝塞爾曲線， Bezier曲線是應用於二維圖形的曲線。曲線由頂點和控制點組成，經過改變控制點座標能夠改變曲線的形狀。
因此繪製點通常有開始點座標，結束點座標，還有控制點座標。

BezierCurve Demo:

BezierCurve Code:

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    graphic: {
      type: 'bezierCurve',
        id: 'bezierCurve',
        right: 50,
        top: 20,
        origin: [75, 75],
        shape: {
            x1: 50,
            x2: 50,
            y1: 400,
            y2: 400,
            cpx1: 60,
            cpy1: 60,
            cpx2: 300,
            cpy2: 300,
            percent: 80
        },
        style: {
            fill: '#fff',
            stroke: 'blue'
        }
    }, 
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};
  [1]: https://segmentfault.com/a/1190000019667988

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。