You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/04/27 17:42:23 UTC
[incubator-echarts] 01/02: tweak.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 33deb730c54a4d6490b8c25855ddfbce9137e41d
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Apr 27 22:42:44 2018 +0800
tweak.
---
src/chart/line/poly.js | 46 +++---
test/smooth.html | 391 ++++++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 397 insertions(+), 40 deletions(-)
diff --git a/src/chart/line/poly.js b/src/chart/line/poly.js
index a7e86b7..9a53ebc 100644
--- a/src/chart/line/poly.js
+++ b/src/chart/line/poly.js
@@ -80,29 +80,29 @@ function drawSegment(
* If is undefined, either being monotone
* in 'x' or 'y' will call `drawMono`.
*/
-function isMono(points, smoothMonotone) {
- if (points.length <= 1) {
- return true;
- }
-
- var dim = smoothMonotone === 'x' ? 0 : 1;
- var last = points[0][dim];
- var lastDiff = 0;
- for (var i = 1; i < points.length; ++i) {
- var diff = points[i][dim] - last;
- if (!isNaN(diff) && !isNaN(lastDiff)
- && diff !== 0 && lastDiff !== 0
- && ((diff >= 0) !== (lastDiff >= 0))
- ) {
- return false;
- }
- if (!isNaN(diff) && diff !== 0) {
- lastDiff = diff;
- last = points[i][dim];
- }
- }
- return true;
-}
+// function isMono(points, smoothMonotone) {
+// if (points.length <= 1) {
+// return true;
+// }
+
+// var dim = smoothMonotone === 'x' ? 0 : 1;
+// var last = points[0][dim];
+// var lastDiff = 0;
+// for (var i = 1; i < points.length; ++i) {
+// var diff = points[i][dim] - last;
+// if (!isNaN(diff) && !isNaN(lastDiff)
+// && diff !== 0 && lastDiff !== 0
+// && ((diff >= 0) !== (lastDiff >= 0))
+// ) {
+// return false;
+// }
+// if (!isNaN(diff) && diff !== 0) {
+// lastDiff = diff;
+// last = points[i][dim];
+// }
+// }
+// return true;
+// }
/**
* Draw smoothed line in monotone, in which only vertical or horizontal bezier
diff --git a/test/smooth.html b/test/smooth.html
index db2b041..74fcf46 100644
--- a/test/smooth.html
+++ b/test/smooth.html
@@ -1,33 +1,31 @@
<html>
<head>
<meta charset="utf-8">
- <script src="http://requirejs.org/docs/release/2.2.0/minified/require.js"></script>
+ <script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
<meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
</head>
<body>
<style>
- html, body, #main {
- width: 100%;
- height: 100%;
- }
</style>
- <div id="main"></div>
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+
+
<script>
require([
'echarts'
- // 'echarts/chart/line',
- // 'echarts/component/legend',
- // 'echarts/component/gridSimple',
- // 'echarts/component/tooltip',
- // 'zrender/vml/vml'
], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
- // renderer: 'svg'
- });
-
var data = [
[0, 0]
[1, 1],
@@ -39,7 +37,7 @@
[7, 7]
];
- option = {
+ var option = {
color: ['#4ea397', '#d0648a', '#f5b841'],
animation: false,
title: {
@@ -102,10 +100,369 @@
}
}]
};
- chart.setOption(option);
+ testHelper.create(echarts, 'main0', {
+ option: option,
+ height: 550
+ });
+ })
+
+ </script>
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var symbolSize = 20;
+ var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
+ var points = [];
+
+ var option = {
+ title: {
+ text: 'Click to Add Points'
+ },
+ tooltip: {
+ formatter: function (params) {
+ var data = params.data || [0, 0];
+ return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ min: -60,
+ max: 20,
+ type: 'value',
+ axisLine: {onZero: false}
+ },
+ yAxis: {
+ min: 0,
+ max: 40,
+ type: 'value',
+ axisLine: {onZero: false}
+ },
+ series: [
+ {
+ id: 'a',
+ type: 'line',
+ smooth: true,
+ symbolSize: symbolSize,
+ data: data
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: 'click to add points, check smooth',
+ option: option,
+ height: 550
+ });
+
+ if (chart) {
+
+ var zr = chart.getZr();
+
+ zr.on('click', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+
+ if (chart.containPixel('grid', pointInPixel)) {
+ data.push(pointInGrid);
+
+ chart.setOption({
+ series: [{
+ id: 'a',
+ data: data
+ }]
+ });
+ }
+ });
+
+ zr.on('mousemove', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ zr.setCursorStyle(chart.containPixel('grid', pointInPixel) ? 'copy' : 'default');
+ });
+ }
+ })
+
+ </script>
+
+
+
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ option = {
+ legend: {
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ yAxis: {
+ type: 'value'
+ },
+ xAxis: {
+ type: 'category',
+ axisLine: {onZero: false},
+ boundaryGap: false,
+ data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
+ },
+ series: [
+ {
+ name: '高度(km)与气温(°C)变化关系',
+ type: 'line',
+ smooth: true,
+ smoothMonotone: 'x',
+ lineStyle: {
+ normal: {
+ width: 3,
+ shadowColor: 'rgba(0,0,0,0.4)',
+ shadowBlur: 10,
+ shadowOffsetY: 10
+ }
+ },
+ data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main', {
+ title: 'FIXME: bad case',
+ option: option,
+ height: 550
+ });
+
+ if (chart) {
+
+ var zr = chart.getZr();
+
+ zr.on('click', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+
+ if (chart.containPixel('grid', pointInPixel)) {
+ data.push(pointInGrid);
+
+ chart.setOption({
+ series: [{
+ id: 'a',
+ data: data
+ }]
+ });
+ }
+ });
+
+ zr.on('mousemove', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ zr.setCursorStyle(chart.containPixel('grid', pointInPixel) ? 'copy' : 'default');
+ });
+ }
+ })
+
+ </script>
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ option = {
+ legend: {
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ yAxis: {
+ type: 'value'
+ },
+ xAxis: {
+ type: 'category',
+ axisLine: {onZero: false},
+ boundaryGap: false,
+ data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
+ },
+ series: [
+ {
+ name: '高度(km)与气温(°C)变化关系',
+ type: 'line',
+ smooth: true,
+ smoothMonotone: 'x',
+ lineStyle: {
+ normal: {
+ width: 3,
+ shadowColor: 'rgba(0,0,0,0.4)',
+ shadowBlur: 10,
+ shadowOffsetY: 10
+ }
+ },
+ data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main2', {
+ title: 'FIXME: bad case',
+ option: option,
+ height: 550
+ });
+
+ if (chart) {
+
+ var zr = chart.getZr();
+
+ zr.on('click', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+
+ if (chart.containPixel('grid', pointInPixel)) {
+ data.push(pointInGrid);
+
+ chart.setOption({
+ series: [{
+ id: 'a',
+ data: data
+ }]
+ });
+ }
+ });
+
+ zr.on('mousemove', function (params) {
+ var pointInPixel = [params.offsetX, params.offsetY];
+ zr.setCursorStyle(chart.containPixel('grid', pointInPixel) ? 'copy' : 'default');
+ });
+ }
+ })
+
+ </script>
+
+
+
+
+
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var data = [[1, 4862.4],[2, 5294.7],[3, 5934.5],[4, 7171.0],[5, 8964.4],[6, 10202.2],[7, 11962.5],[8, 14928.3],[9, 16909.2],[10, 18547.9],[11, 21617.8],[12, 26638.1],[13, 34634.4],[14, 46759.4],[15, 58478.1],[16, 67884.6],[17, 74462.6],[18, 79395.7]];
+ var myRegression = {"points":[[1,4162.436774392433],[2,4982.540245685443],[3,5964.224478460412],[4,7139.324897630159],[5,8545.949297850559],[6,10229.71365621353],[7,12245.221430747537],[8,14657.834317479834],[9,17545.791890639037],[10,21002.74886464572],[11,25140.812259760092],[12,30094.176964828697],[13,36023.47759622737],[14,43120.997781149395],[15,51616.90579913977],[16,61786.7187999529],[17,73960.23765779613],[18,88532.24221386963]],"parameter":{"coefficient":3477.318 [...]
+
+ option = {
+ title: {
+ text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
+ subtext: 'By ecStat.regression',
+ sublink: 'https://github.com/ecomfe/echarts-stat',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ xAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ splitNumber: 20
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ series: [{
+ name: 'scatter',
+ type: 'scatter',
+ label: {
+ emphasis: {
+ show: true,
+ position: 'left',
+ textStyle: {
+ color: 'blue',
+ fontSize: 16
+ }
+ }
+ },
+ data: data
+ }, {
+ name: 'line',
+ type: 'line',
+ showSymbol: false,
+ smooth: true,
+ smoothMonotone: 'x',
+ data: myRegression.points,
+ markPoint: {
+ itemStyle: {
+ normal: {
+ color: 'transparent'
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'left',
+ formatter: myRegression.expression,
+ textStyle: {
+ color: '#333',
+ fontSize: 14
+ }
+ }
+ },
+ data: [{
+ coord: myRegression.points[myRegression.points.length - 1]
+ }]
+ }
+ }]
+ };
+
+ testHelper.create(echarts, 'main3', {
+ title: 'FIXME: bad case',
+ option: option,
+ height: 550
+ });
})
</script>
+
+
+
+
+
</body>
</html>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org