Merge option fix, dynamic data example

ee13dc90 · lang · 30f16f78 · ee13dc90 · ee13dc90 · ee13dc90
Showing with 114 addition and 1 deletion

src/chart/line/LineView.js src/chart/line/LineView.js +5 -0

src/model/Model.js src/model/Model.js +1 -1

src/model/Series.js src/model/Series.js +1 -0

test/dynamicData.html test/dynamicData.html +107 -0

未找到文件。
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -86,6 +86,11 @@ define(function(require) {
                && prevCoordSys.type === coordSys.type
                && enableAnimation)
            ) {
+                // Remove previous created polyline
+                if (polyline) {
+                    group.remove(polyline);
+                }
+
                dataSymbol.updateData(data, false);

                polyline = new graphic.Polyline({

--- a/src/model/Model.js
+++ b/src/model/Model.js
@@ -41,7 +41,7 @@ define(function (require) {
         * 从新的 Option merge
         */
        mergeOption: function (option) {
-            zrUtil.merge(this.option, option);
+            zrUtil.merge(this.option, option, true);
        },

        /**

--- a/src/model/Series.js
+++ b/src/model/Series.js
@@ -71,6 +71,7 @@ define(function(require) {
            // TODO Merge data?
            if (data) {
                this._data = data;
+                this._dataBeforeProcessing = data.cloneShallow();
            }
        },


--- a/test/dynamicData.html
+++ b/test/dynamicData.html
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/component/legend',
+                'echarts/component/grid'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var count = 0;
+                for (; count < 100; count++) {
+                    xAxisData.push('类目' + count);
+                    data1.push(+Math.random().toFixed(3));
+                }
+
+                var itemStyle = {
+                    normal: {
+                        borderColor: 'white',
+                        borderWidth: 3,
+                        // shadowBlur: 10,
+                        // shadowOffsetX: 0,
+                        // shadowOffsetY: 5,
+                        // shadowColor: 'rgba(0, 0, 0, 0.4)',
+                        lineStyle: {
+                            width: 3,
+                            // shadowBlur: 10,
+                            // shadowOffsetX: 0,
+                            // shadowOffsetY: 5,
+                            // shadowColor: 'rgba(0, 0, 0, 0.4)'
+                        }
+                    }
+                };
+
+                chart.setOption({
+                    legend: {
+                        data: ['line']
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
+                    },
+                    // animation: false,
+                    xAxis: {
+                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        data: xAxisData,
+                        // boundaryGap: false
+                    },
+                    yAxis: {
+                        splitLine: {
+                            // show: false
+                        }
+                    },
+                    series: [{
+                        name: 'line',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data1,
+                        itemStyle: itemStyle
+                    }]
+                });
+
+                setInterval(function () {
+                    data1.shift();
+                    data1.push(+Math.random().toFixed(3));
+
+                    xAxisData.shift();
+                    xAxisData.push('类目' + count++);
+
+                    chart.setOption({
+                        xAxis: {
+                            data: xAxisData
+                        },
+                        series: [{
+                            name: 'line',
+                            data: data1
+                        }]
+                    });
+                }, 100);
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file