Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2f5de491 编写于 作者: 1 100pah
浏览文件
操作

test: add test case for clip init.

上级 dfad53d5
隐藏空白更改
内联 并排
Showing with 221 addition and 93 deletion
src/chart/custom.ts
浏览文件 @ 2f5de491
......@@ -221,13 +221,13 @@ interface CustomSeriesRenderItemCoordinateSystemAPI {
): number | number[];
}
interface CustomSeriesRenderItemParams {
context: {};
context: Dictionary<unknown>;
seriesId: string;
seriesName: string;
seriesIndex: number;
coordSys: CustomSeriesRenderItemParamsCoordSys;
dataInsideLength: number;
encode: ReturnType<typeof wrapEncodeDef>
encode: ReturnType<typeof wrapEncodeDef>;
}
type CustomSeriesRenderItem = (
params: CustomSeriesRenderItemParams,
......
test/custom-feature.html
浏览文件 @ 2f5de491
......@@ -35,9 +35,10 @@ under the License.
</style>
<div id="main0"></div>
<div id="main2"></div>
<div id="main3"></div>
<div id="main-eventful"></div>
<div id="main-clip-by-system"></div>
<div id="main-clip-by-self"></div>
<div id="main-SVG-Path"></div>
<script>
......@@ -107,7 +108,7 @@ under the License.
}]
};
var chart = testHelper.create(echarts, 'main0', {
var chart = testHelper.create(echarts, 'main-eventful', {
title: [
'Eventful: ',
'Only this el trigger events: **red circle** and **red rect** of **dataIndex: 1**',
......@@ -138,8 +139,6 @@ under the License.
'echarts'/*, 'map/js/china' */
], function (echarts) {
// deprecated: this case would be wrong.
var option = {
xAxis: {
min: 90,
......@@ -151,13 +150,11 @@ under the License.
max: 500,
scale: true
},
dataZoom: [{
type: 'inside',
filterMode: 'none'
}, {
type: 'slider',
filterMode: 'none'
}],
dataZoom: [
{type: 'inside', filterMode: 'none'},
{type: 'slider', filterMode: 'none'},
{type: 'slider', filterMode: 'none', orient: 'vertical'},
],
series: [{
type: 'custom',
renderItem: function (params, api) {
......@@ -173,24 +170,19 @@ under the License.
[90, 50]
]
},
clip: {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
},
style: {
fill: 'green'
}
}
},
clip: true,
data: [[100, 300]]
}]
};
var chart = testHelper.create(echarts, 'main2', {
var chart = testHelper.create(echarts, 'main-clip-by-system', {
title: [
'The shape should be **clipped** by the grid. (TODO)',
'The shape should be **clipped** by the grid (by series.clip).',
],
option: option
});
......@@ -204,13 +196,82 @@ under the License.
<script>
require([
'echarts'/*, 'map/js/china' */
], function (echarts) {
var option = {
xAxis: {
min: 90,
max: 120,
scale: true
},
yAxis: {
min: 50,
max: 500,
scale: true
},
dataZoom: [
{type: 'inside', filterMode: 'none'},
{type: 'slider', filterMode: 'none'},
{type: 'slider', filterMode: 'none', orient: 'vertical'},
],
series: [{
type: 'custom',
renderItem: function (params, api) {
return {
type: 'group',
children: [{
type: 'polygon',
position: api.coord([api.value(0), api.value(1)]),
shape: {
points: [
[0, 0],
[50, -50],
[90, -50],
[140, 0],
[90, 50]
]
},
style: {
fill: 'blue'
}
}],
clipPath: {
type: 'rect',
shape: {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
}
}
},
data: [[100, 300]]
}]
};
var chart = testHelper.create(echarts, 'main-clip-by-self', {
title: [
'The shape should be **clipped** by the grid (by custom clipPath).',
],
option: option
});
});
</script>
<script>
require(['echarts'], function (echarts) {
// deprecated: this case would be wrong.
var data = [];
......@@ -224,23 +285,6 @@ under the License.
tooltip: {
},
dataZoom: [{
type: 'slider',
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 20,
bottom: 0,
start: -26,
end: 26,
showDetail: false
}, {
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter',
start: -26,
end: 26,
zoomOnMouseWheel: false,
moveOnMouseMove: true
}, {
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
......@@ -350,7 +394,7 @@ under the License.
};
}
var chart = testHelper.create(echarts, 'main3', {
var chart = testHelper.create(echarts, 'main-SVG-Path', {
title: [
'Test SVG path data auto fit to rect: ',
'the y axis label (made by custom series) should be center',
......@@ -367,5 +411,7 @@ under the License.
</body>
</html>
\ No newline at end of file
test/custom-transition.html
浏览文件 @ 2f5de491
......@@ -42,6 +42,7 @@ under the License.
<div id="texture-bar-by-clipPath"></div>
<div id="enter-animation"></div>
<div id="enter-animation2"></div>
<div id="enter-animation-clipPath"></div>
<div id="style-animation"></div>
<div id="transform-animation"></div>
<div id="transform-animation-disabled"></div>
......@@ -51,6 +52,61 @@ under the License.
<!--
<script>
require(['echarts'], function (echarts) {
var chart = testHelper.create(echarts, 'texture-bar-texture-maker', {
title: [],
width: 200,
height: 200,
option: {},
buttons: [{
text: 'dataURL',
onclick: function () {
console.log(chart.getDataURL({
type: 'png',
backgroundColor: 'rgba(0,0,0,0)'
}));
}
}]
});
if (!chart) {
return;
}
var zr = chart.getZr();
var eles = [];
var extent = [0.0, 0.95];
var count = 200;
var unit = (extent[1] - extent[0]) / count;
var baseColor = 'rgb(0,0,255)';
for (var i = 0; i < count; i++) {
var oo = extent[0] + (count - i) * unit;
var color = echarts.color.modifyHSL(baseColor, null, null, oo);
var startAngle = 2 * Math.PI / count * i;
var endAngle = Math.min((2 * Math.PI / count * (i + 1) + 0.05), Math.PI * 2);
zr.add(new echarts.graphic.Sector({
type: 'sector',
shape: {
cx: 100,
cy: 100,
r: 100,
r0: 60,
startAngle: startAngle,
endAngle: endAngle
},
style: {
fill: color
}
}));
}
});
</script> -->
<script>
require([
'echarts'
......@@ -726,57 +782,6 @@ under the License.
</script>
<script>
require(['echarts'], function (echarts) {
var chart = testHelper.create(echarts, 'texture-bar-texture-maker', {
title: [],
width: 200,
height: 200,
option: {},
buttons: [{
text: 'dataURL',
onclick: function () {
console.log(chart.getDataURL({
type: 'png',
backgroundColor: 'rgba(0,0,0,0)'
}));
}
}]
});
if (!chart) {
return;
}
var zr = chart.getZr();
var eles = [];
var extent = [0.0, 0.95];
var count = 200;
var unit = (extent[1] - extent[0]) / count;
var baseColor = 'rgb(0,0,255)';
for (var i = 0; i < count; i++) {
var oo = extent[0] + (count - i) * unit;
var color = echarts.color.modifyHSL(baseColor, null, null, oo);
var startAngle = 2 * Math.PI / count * i;
var endAngle = Math.min((2 * Math.PI / count * (i + 1) + 0.05), Math.PI * 2);
zr.add(new echarts.graphic.Sector({
type: 'sector',
shape: {
cx: 100,
cy: 100,
r: 100,
r0: 60,
startAngle: startAngle,
endAngle: endAngle
},
style: {
fill: color
}
}));
}
});
</script>
......@@ -958,6 +963,83 @@ under the License.
<script>
require(['echarts'], function (echarts) {
var animationDuration = 1000;
var animationDurationUpdate = 1000;
var option = {
animationDuration: animationDuration,
animationDurationUpdate: animationDurationUpdate,
animationEasing: 'linear',
xAxis: {
max: 500
},
yAxis: {
max: 300
},
series: [{
type: 'custom',
renderItem: function (params, api) {
var pos = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [{
type: 'rect',
shape: {x: 0, y: 0, width: 2000, height: 2000},
style: {fill: 'orange'}
}, {
type: 'polygon',
x: pos[0],
y: pos[1],
shape: {
points: [
[0, 0],
[50, -50],
[90, -50],
[140, 0],
[90, 50]
]
},
style: {
fill: 'green'
}
}],
clipPath: {
type: 'rect',
shape: {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
$enterFrom: {width: 0}
}
}
};
},
data: [[71, 133], [159, 113]]
}]
};
var chart = testHelper.create(echarts, 'enter-animation-clipPath', {
title: [
'Ensure enter animation by clipPath play normal (from left to right).'
],
height: 300,
option: option
});
});
</script>
<script>
require(['echarts'], function (echarts) {
var weatherIcons = {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或