line visual gradient tweak

4e4ed530 · lang · 27b51ec4 · 4e4ed530 · 4e4ed530
隐藏空白更改
内联并排

Showing with 89 addition and 4 deletion

src/chart/line/LineView.js src/chart/line/LineView.js +6 -4

test/line-visual.html test/line-visual.html +83 -0

未找到文件。
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -234,14 +234,16 @@ define(function(require) {
        }
        var dimension = visualMeta.dimension;
        var dimName = data.dimensions[dimension];
+        var dataExtent = data.getDataExtent(dimName);

        var stops = visualMeta.stops;

        var colorStops = [];
        var firstStop = stops[0];
        var lastStop = stops[stops.length - 1];
-        var min = firstStop.interval ? firstStop.interval[0] : firstStop.value;
-        var max = lastStop.interval ? lastStop.interval[1] : lastStop.value;
+        // interval canbe infinity in piecewise case
+        var min = firstStop.interval ? Math.max(firstStop.interval[0], dataExtent[0]) : firstStop.value;
+        var max = lastStop.interval ? Math.min(lastStop.interval[1], dataExtent[1]) : lastStop.value;
        var stopsSpan = max - min;
        for (var i = 0; i < stops.length; i++) {
            // Piecewise
@@ -250,10 +252,10 @@ define(function(require) {
                    continue;
                }
                colorStops.push({
-                    offset: (stops[i].interval[0] - min) / stopsSpan,
+                    offset: (Math.max(stops[i].interval[0], dataExtent[0]) - min) / stopsSpan,
                    color: stops[i].color
                }, {
-                    offset: (stops[i].interval[1] - min) / stopsSpan,
+                    offset: (Math.min(stops[i].interval[1], dataExtent[1]) - min) / stopsSpan,
                    color: stops[i].color
                });
            }

--- a/test/line-visual.html
+++ b/test/line-visual.html
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/facePrint.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="info"></div>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip',
+                'echarts/component/visualMap'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+
+                var xAxisData = [];
+                var data1 = [];
+
+                var base = Math.round(Math.random() * 100);
+                for (var i = 0; i < 1000; i++) {
+                    xAxisData.push('类目' + i);
+                    base += Math.round(Math.random() * 10 - 5);
+                    data1.push(base);
+                }
+
+                chart.setOption({
+                    visualMap: {
+                        // min: 0,
+                        // max: 50,
+                        // FIXME piecewise 的 symbol 颜色有问题
+                        type: 'piecewise',
+                        pieces: [{
+                            max: 0,
+                            color: 'red'
+                        }, {
+                            min: 0,
+                            color: 'blue'
+                        }]
+                        // inRange: {
+                        //     color: ['red', 'blue']
+                        // }
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
+                    },
+                    xAxis: {
+                        data: xAxisData,
+                        boundaryGap: false
+                    },
+                    yAxis: {},
+                    series: [{
+                        name: 'line',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        areaStyle: { normal: {} },
+                        symbolSize: 10,
+                        data: data1
+                    }]
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file