Merge branch 'master' of https://www.github.com/ecomfe/echarts

8800c728 · sushuang · e4f3e848 · df0a815e · 8800c728 · 8800c728
Showing with 161 addition and 6 deletion

src/component/axis/AxisBuilder.js src/component/axis/AxisBuilder.js +60 -5

src/coord/axisDefault.js src/coord/axisDefault.js +4 -1

test/axis-arrow.html test/axis-arrow.html +97 -0

未找到文件。
--- a/src/component/axis/AxisBuilder.js
+++ b/src/component/axis/AxisBuilder.js
@@ -3,6 +3,7 @@ import * as formatUtil from '../../util/format';
 import * as graphic from '../../util/graphic';
 import Model from '../../model/Model';
 import {isRadianAroundZero, remRadian} from '../../util/number';
+import {createSymbol} from '../../util/symbol';
 import * as matrixUtil from 'zrender/src/core/matrix';
 import * as vec2 from 'zrender/src/core/vector';

@@ -144,8 +145,14 @@ var builders = {
            v2ApplyTransform(pt2, pt2, matrix);
        }

-        this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
+        var lineStyle = zrUtil.extend(
+            {
+                lineCap: 'round'
+            },
+            axisModel.getModel('axisLine.lineStyle').getLineStyle()
+        );

+        this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
            // Id for animation
            anid: 'line',

@@ -155,14 +162,62 @@ var builders = {
                x2: pt2[0],
                y2: pt2[1]
            },
-            style: zrUtil.extend(
-                {lineCap: 'round'},
-                axisModel.getModel('axisLine.lineStyle').getLineStyle()
-            ),
+            style: lineStyle,
            strokeContainThreshold: opt.strokeContainThreshold || 5,
            silent: true,
            z2: 1
        })));
+
+        var arrows = axisModel.get('axisLine.symbol');
+        var arrowSize = axisModel.get('axisLine.symbolSize');
+
+        if (arrows != null) {
+            if (typeof arrows === 'string') {
+                // Use the same arrow for start and end point
+                arrows = [arrows, arrows];
+            }
+            if (typeof arrowSize === 'string'
+                || typeof arrowSize === 'number'
+            ) {
+                // Use the same size for width and height
+                arrowSize = [arrowSize, arrowSize];
+            }
+
+            var symbolWidth = arrowSize[0];
+            var symbolHeight = arrowSize[1];
+
+            // Start arrow
+            if (arrows[0] !== 'none' && arrows[0] != null) {
+                var symbol = createSymbol(
+                    arrows[0],
+                    -symbolWidth / 2,
+                    -symbolHeight / 2,
+                    symbolWidth,
+                    symbolHeight,
+                    lineStyle.stroke,
+                    true
+                );
+                symbol.attr('rotation', opt.rotation + Math.PI / 2);
+                symbol.attr('position', pt1);
+                this.group.add(symbol);
+            }
+
+            // End arrow
+            if (arrows[1] !== 'none' && arrows[1] != null) {
+                var symbol = createSymbol(
+                    arrows[1],
+                    -symbolWidth / 2,
+                    -symbolHeight / 2,
+                    symbolWidth,
+                    symbolHeight,
+                    lineStyle.stroke,
+                    true
+                );
+                symbol.attr('rotation', opt.rotation - Math.PI / 2);
+                symbol.attr('position', pt2);
+                this.group.add(symbol);
+            }
+        }
    },

    /**

--- a/src/coord/axisDefault.js
+++ b/src/coord/axisDefault.js
@@ -43,7 +43,10 @@ var defaultOption = {
            color: '#333',
            width: 1,
            type: 'solid'
-        }
+        },
+        // 坐标轴两端的箭头
+        symbol: ['none', 'none'],
+        symbolSize: [10, 15]
    },
    // 坐标轴小标记
    axisTick: {

--- a/test/axis-arrow.html
+++ b/test/axis-arrow.html
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            html, body, #main, .chart {
+                width: 100%;
+            }
+
+            .chart {
+                height: 300px;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                var options = [{
+                    title: {
+                        text: 'x: default; y: default'
+                    },
+                    xAxis: {
+                        data: ['a', 'b', 'c', 'd', 'e']
+                    },
+                    yAxis: {
+                    },
+                    series: [{
+                        type: 'line',
+                        data: [2, 3, 5, 1, 6]
+                    }]
+                }, {
+                    title: {
+                        text: 'x: ["none", "arrow"]; y: "arrow" of size 30x20'
+                    },
+                    xAxis: {
+                        data: ['a', 'b', 'c', 'd', 'e'],
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            lineStyle: {
+                                color: 'green'
+                            }
+                        }
+                    },
+                    yAxis: {
+                        axisLine: {
+                            symbol: 'arrow',
+                            symbolSize: [30, 20]
+                        }
+                    },
+                    series: [{
+                        type: 'line',
+                        data: [2, 3, 5, 1, 6]
+                    }]
+                }, {
+                    title: {
+                        text: 'x: "none"; y: ["none", "arrow"], inversed'
+                    },
+                    xAxis: {
+                        data: ['a', 'b', 'c', 'd', 'e'],
+                        axisLine: {
+                            symbol: 'none'
+                        }
+                    },
+                    yAxis: {
+                        axisLine: {
+                            symbol: ['none', 'arrow']
+                        },
+                        inversed: true
+                    },
+                    series: [{
+                        type: 'line',
+                        data: [2, 3, 5, 1, 6]
+                    }]
+                }];
+
+                var main = document.getElementById('main');
+                for (var i = 0; i < options.length; ++i) {
+                    var container = document.createElement('div');
+                    container.setAttribute('class', 'chart');
+                    main.appendChild(container);
+
+                    var chart = echarts.init(container);
+                    chart.setOption(options[i]);
+                }
+
+            });
+
+        </script>
+    </body>
+</html>