乐趣区

Echarts-graphic原生图形元素组件

jiezi

前面的文章介绍了 Echarts 通用配置项，这篇文章进入第二个主题介绍：Echarts graphic 原生图形元素组件。

graphic 是原生图形元素组件。可以支持的图形元素包括：
Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group。这篇文章分别介绍 graphic 的通用设置，以及通用事件，接下来会分别介绍每种图形的绘制方法。

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

二、graphic 的通用事件

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

三、绘制方法

按照形状的类别，把这些分为六类。

1、Image

Image: 图形

Demo:

Code:

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]
    }]
};

2、Group, Rect, Text

Group: 组，把各个元素都包起来
Rect: 矩形，绘制矩形就是指定宽度，高度
Text: 文案

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]
    }]
};

3、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 的写法相似，这里不多介绍了。

4、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]
    }]
};

5、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]
    }]
};

6、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
退出移动版