Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 33deb730 编写于 作者: S sushuang
浏览文件
操作

tweak.

上级 332b0862
隐藏空白更改
内联 并排
Showing with 397 addition and 40 deletion
src/chart/line/poly.js
浏览文件 @ 33deb730
......@@ -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
......
test/smooth.html
浏览文件 @ 33deb730
<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.318605869281,"index":0.1798391846241552},"expression":"y = 3477.32e^(0.18x)"};
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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或