提交 5d14d225 编写于 作者: L lang

Line smooth

上级 9b0def2b
// TODO Smooth
// TODO '-' data
define(function(require) {
'use strict';
......@@ -26,6 +24,10 @@ define(function(require) {
return true;
}
function getSmooth(smooth) {
return typeof (smooth) === 'number' ? smooth : (smooth ? 0.2 : 0);
}
function getAxisExtentWithGap(axis) {
var extent = axis.getExtent();
if (axis.onBand) {
......@@ -158,7 +160,16 @@ define(function(require) {
lineJoin: 'bevel'
}
));
var smooth = seriesModel.get('smooth');
smooth = getSmooth(seriesModel.get('smooth'));
polyline.shape.smooth = smooth;
if (polygon) {
var polygonShape = polygon.shape;
var stackedOn = data.stackedOn;
var stackedOnSmooth = 0;
polygon.style.opacity = 0.7;
polygon.setStyle(zrUtil.defaults(
areaStyleModel.getAreaStyle(),
......@@ -167,6 +178,14 @@ define(function(require) {
lineJoin: 'bevel'
}
));
polygonShape.smooth = smooth;
if (stackedOn) {
var stackedOnSeries = stackedOn.hostModel;
stackedOnSmooth = getSmooth(stackedOnSeries.get('smooth'))
}
polygonShape.stackedOnSmooth = stackedOnSmooth;
}
this._data = data;
......
// Poly path support NaN point
define(function (require) {
var smoothBezier = require('zrender/graphic/helper/smoothBezier');
var Path = require('zrender/graphic/Path');
var vec2 = require('zrender/core/vector');
var mathMin = Math.min;
var mathMax = Math.max;
var scaleAndAdd = vec2.scaleAndAdd;
var v2Copy = vec2.copy;
// Temporary variable
var v = [];
var cp0 = [];
var cp1 = [];
function drawSegment(ctx, points, start, allLen, segLen, dir, smooth) {
var idx = start;
for (var k = 0; k < segLen; k++) {
var p = points[idx];
if (idx >= allLen || idx < 0 || isNaN(p[0]) || isNaN(p[1])) {
break;
}
if (idx === start) {
ctx[dir > 0 ? 'moveTo' : 'lineTo'](p[0], p[1]);
v2Copy(cp0, p);
}
else {
if (smooth > 0) {
var prevIdx = idx - dir;
var nextIdx = idx + dir;
if (dir > 0) {
prevIdx = mathMax(prevIdx, start);
nextIdx = mathMin(nextIdx, allLen - 1);
}
else {
nextIdx = mathMax(nextIdx, 0);
prevIdx = mathMin(prevIdx, start);
}
var prevP = points[prevIdx];
var nextP = points[nextIdx];
// If next data is null
if (isNaN(nextP[0]) || isNaN(nextP[1])) {
nextP = p;
}
vec2.sub(v, nextP, prevP);
scaleAndAdd(cp1, p, v, -smooth / 2);
ctx.bezierCurveTo(
cp0[0], cp0[1],
cp1[0], cp1[1],
p[0], p[1]
);
// cp0 of next segment
scaleAndAdd(cp0, p, v, smooth / 2);
}
else {
ctx.lineTo(p[0], p[1]);
}
}
idx += dir;
}
return k;
}
return {
......@@ -11,13 +76,17 @@ define(function (require) {
type: 'ec-polyline',
shape: {
points: []
points: [],
smooth: 0
},
style: {
fill: null,
stroke: '#000'
stroke: '#000',
smooth: 0
},
buildPath: function (ctx, shape) {
......@@ -25,16 +94,9 @@ define(function (require) {
var i = 0;
var len = points.length;
while (i < len) {
for (var k = i; k < len; k++) {
var p = points[k];
if (p == null || isNaN(p[0]) || isNaN(p[1])) {
break;
}
ctx[k === i ? 'moveTo' : 'lineTo'](p[0], p[1]);
}
i = k + 1;
while (i < len) {
i += drawSegment(ctx, points, i, len, len, 1, shape.smooth) + 1;
}
}
}),
......@@ -46,7 +108,9 @@ define(function (require) {
shape: {
points: [],
// Offset between stacked base points and points
stackedOnPoints: []
stackedOnPoints: [],
smooth: 0,
stackedOnSmooth: 0
},
buildPath: function (ctx, shape) {
......@@ -56,19 +120,15 @@ define(function (require) {
var i = 0;
var len = points.length;
while (i < len) {
for (var k = i; k < len; k++) {
var p = points[k];
if (p == null || isNaN(p[0]) || isNaN(p[1])) {
break;
}
ctx[k === i ? 'moveTo' : 'lineTo'](p[0], p[1]);
}
var tmp = k;
for (k--; k >= i; k--) {
var p = stackedOnPoints[k];
ctx.lineTo(p[0], p[1]);
}
i = tmp + 1;
var k = drawSegment(
ctx, points, i, len, len, 1, shape.smooth
);
drawSegment(
ctx, stackedOnPoints, i + k - 1, len, k, -1, shape.stackedOnSmooth
);
i += k + 1;
ctx.closePath();
}
}
})
......
......@@ -31,13 +31,25 @@
var data2 = [];
var data3 = [];
for (var i = 0; i < 10; i++) {
for (var i = 0; i < 5; i++) {
xAxisData.push('类目' + i);
data1.push((-Math.random() - 0.2).toFixed(3));
data2.push((Math.random() + 0.3).toFixed(3));
data3.push((Math.random() + 0.2).toFixed(3));
}
data1.push('-');
data2.push('-');
data3.push('-');
for (; i < 10; i++) {
xAxisData.push('类目' + i);
data1.push((-Math.random() - 0.2).toFixed(3));
data2.push((Math.random() + 0.3).toFixed(3));
data3.push((Math.random() + 0.2).toFixed(3));
}
var itemStyle = {
normal: {
// borderColor: 'white',
......@@ -88,21 +100,24 @@
stack: 'all',
symbolSize: 10,
data: data1,
itemStyle: itemStyle
itemStyle: itemStyle,
smooth: true
}, {
name: 'line2',
type: 'line',
stack: 'all',
symbolSize: 10,
data: data2,
itemStyle: itemStyle
itemStyle: itemStyle,
smooth: true
}, {
name: 'line3',
type: 'line',
stack: 'all',
symbolSize: 10,
data: data3,
itemStyle: itemStyle
itemStyle: itemStyle,
smooth: true
}]
});
})
......
......@@ -40,9 +40,16 @@
for (var i = 0; i < 200; i++) {
xAxisData.push('类目' + i);
data1.push((Math.random() + 0.1).toFixed(2));
data2.push(Math.random().toFixed(2));
data3.push(Math.random().toFixed(2));
if (Math.random() < 0.03) {
data1.push('-');
data2.push('-');
data3.push('-');
}
else {
data1.push((Math.random() + 0.1).toFixed(2));
data2.push(Math.random().toFixed(2));
data3.push(Math.random().toFixed(2));
}
}
chart.setOption({
......@@ -50,7 +57,7 @@
data: ['line', 'line2', 'line3']
},
tooltip: {
trigger: 'axis'
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
......@@ -66,18 +73,21 @@
name: 'line2',
type: 'line',
stack: 'all',
data: data2
data: data2,
smooth: true
},
{
name: 'line3',
type: 'line',
stack: 'all',
data: data3
data: data3,
smooth: 0.1
},
{
name: 'line',
type: 'line',
data: data1,
smooth: true,
stack: 'all',
itemStyle: {
normal: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册