1498 lines
61 KiB
HTML
Generated
1498 lines
61 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.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>
|
|
<script src="./custom-transition-texture.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
<!-- <div id="texture-bar-texture-maker"></div> -->
|
|
|
|
<div id="spiral-fixed-extent"></div>
|
|
<div id="spiral-dynamic-extent"></div>
|
|
<div id="texture-bar-by-clipPath"></div>
|
|
<div id="no-animation"></div>
|
|
<div id="enter-animation-and-merge"></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>
|
|
<div id="leave-animation"></div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
<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'
|
|
], function (echarts) {
|
|
var _animationDuration = 5000;
|
|
var _animationDurationUpdate = 7000;
|
|
var _animationEasingUpdate = 'elasticOut';
|
|
var _angleLabel = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpius', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'];
|
|
var _valOnRoundAngle = _angleLabel.length;
|
|
var _valOnAngleStep = _valOnRoundAngle / 90;
|
|
var _barWidthValue = 0.4;
|
|
var _valOnRadiusStep = 4;
|
|
|
|
var _colors = [
|
|
{ border: 'green', inner: 'rgba(0,152,0,0.6)' },
|
|
{ border: 'red', inner: 'rgba(152,0,0,0.6)' },
|
|
{ border: 'blue', inner: 'rgba(0,0, 152,0.6)' },
|
|
];
|
|
var _currentDataIndex = 0;
|
|
var _datasourceList = [
|
|
[[3, 6, 9]],
|
|
[[12, 16, 14]],
|
|
[[17, 22, 19]],
|
|
];
|
|
var _barValOnRadiusList = [1, 2, 3];
|
|
|
|
function getMaxRadius() {
|
|
var radius = 0;
|
|
for (var k = 0; k < _barValOnRadiusList.length; k++) {
|
|
for (var i = 0; i < _datasourceList.length; i++) {
|
|
var row = _datasourceList[i][0];
|
|
for (var j = 0; j < row.length; j++) {
|
|
var valOnAngle = row[j];
|
|
radius = Math.max(
|
|
radius,
|
|
getSpiralValueOnRadius(_barValOnRadiusList[k], valOnAngle)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
return Math.ceil(radius * 1.2);
|
|
}
|
|
|
|
function getSpiralValueOnRadius(valOnRadius, valOnAngle) {
|
|
return valOnRadius + _valOnRadiusStep * (valOnAngle / _valOnRoundAngle);
|
|
}
|
|
|
|
function renderItem(params, api) {
|
|
var children = [];
|
|
|
|
addShapes(api, children, _barValOnRadiusList[0], api.value(0), _colors[0]);
|
|
addShapes(api, children, _barValOnRadiusList[1], api.value(1), _colors[1]);
|
|
addShapes(api, children, _barValOnRadiusList[2], api.value(2), _colors[2]);
|
|
|
|
return {
|
|
type: 'group',
|
|
children: children
|
|
};
|
|
}
|
|
|
|
function addShapes(api, children, valOnRadius, valOnAngle, color) {
|
|
addPolygon(api, children, valOnRadius, valOnAngle, color);
|
|
addLabel(api, children, valOnRadius, valOnAngle, color);
|
|
}
|
|
|
|
function addPolygon(api, children, valOnRadius, valOnAngle, color) {
|
|
children.push({
|
|
type: 'polygon',
|
|
shape: {
|
|
points: makeShapePoints(api, valOnRadius, valOnAngle)
|
|
},
|
|
extra: {
|
|
valOnAngle: valOnAngle,
|
|
transition: 'valOnAngle'
|
|
},
|
|
style: {
|
|
lineWidth: 1,
|
|
fill: color.inner,
|
|
stroke: color.border
|
|
},
|
|
during: function (apiDuring) {
|
|
apiDuring.setShape('points', makeShapePoints(
|
|
api, valOnRadius, apiDuring.getExtra('valOnAngle')
|
|
));
|
|
}
|
|
});
|
|
}
|
|
|
|
function makeShapePoints(api, valOnRadius, valOnAngle) {
|
|
var points = [];
|
|
for (var iAngleVal = 0, end = valOnAngle + _valOnAngleStep; iAngleVal < end; iAngleVal += _valOnAngleStep) {
|
|
iAngleVal > valOnAngle && (iAngleVal = valOnAngle);
|
|
var iRadiusVal = getSpiralValueOnRadius(valOnRadius - _barWidthValue, iAngleVal);
|
|
var point = api.coord([iRadiusVal, iAngleVal]).slice(0, 2);
|
|
points.push(point);
|
|
}
|
|
for (var iAngleVal = valOnAngle; iAngleVal > -_valOnAngleStep; iAngleVal -= _valOnAngleStep) {
|
|
iAngleVal < 0 && (iAngleVal = 0);
|
|
var iRadiusVal = getSpiralValueOnRadius(valOnRadius + _barWidthValue, iAngleVal);
|
|
var point = api.coord([iRadiusVal, iAngleVal]).slice(0, 2);
|
|
points.push(point);
|
|
}
|
|
return points;
|
|
}
|
|
|
|
function addLabel(api, children, valOnRadius, valOnAngle, color) {
|
|
var point = makeLabelPosition(api, valOnRadius, valOnAngle);
|
|
children.push({
|
|
type: 'text',
|
|
x: point[0],
|
|
y: point[1],
|
|
transition: [],
|
|
extra: {
|
|
valOnAngle: valOnAngle,
|
|
transition: 'valOnAngle'
|
|
},
|
|
style: {
|
|
text: getText(valOnAngle),
|
|
fill: color.inner,
|
|
stroke: '#fff',
|
|
lineWidth: 3,
|
|
fontSize: 16,
|
|
align: 'center',
|
|
verticalAlign: 'middle'
|
|
},
|
|
z2: 50,
|
|
during: function (apiDuring) {
|
|
var iValOnAngle = apiDuring.getExtra('valOnAngle');
|
|
var point = makeLabelPosition(api, valOnRadius, iValOnAngle);
|
|
apiDuring.setTransform('x', point[0]).setTransform('y', point[1]);
|
|
apiDuring.setStyle('text', getText(iValOnAngle));
|
|
}
|
|
});
|
|
|
|
function getText(iValOnAngle) {
|
|
return (iValOnAngle / _valOnRoundAngle * 100).toFixed(0) + '%'
|
|
}
|
|
}
|
|
|
|
function makeLabelPosition(api, valOnRadius, valOnAngle) {
|
|
var iRadiusVal = getSpiralValueOnRadius(valOnRadius, valOnAngle);
|
|
return api.coord([iRadiusVal, valOnAngle + 1 / iRadiusVal / (2 * Math.PI) * _valOnRoundAngle]);
|
|
}
|
|
|
|
var option = {
|
|
// animation: false,
|
|
animationDuration: _animationDuration,
|
|
animationDurationUpdate: _animationDurationUpdate,
|
|
animationEasingUpdate: _animationEasingUpdate,
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
},
|
|
angleAxis: {
|
|
type: 'value',
|
|
// splitLine: { show: false },
|
|
splitArea: {show: true},
|
|
axisLabel: {
|
|
formatter: function(val) {
|
|
return _angleLabel[val];
|
|
},
|
|
color: 'rgba(0,0,0,0.2)'
|
|
},
|
|
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
|
|
min: 0,
|
|
max: _valOnRoundAngle
|
|
},
|
|
radiusAxis: {
|
|
type: 'value',
|
|
splitLine: { show: false },
|
|
axisLabel: { color: 'rgba(0,0,0,0.2)' },
|
|
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
|
|
min: 0,
|
|
max: getMaxRadius()
|
|
},
|
|
polar: {},
|
|
series: [{
|
|
type: 'custom',
|
|
coordinateSystem: 'polar',
|
|
renderItem: renderItem
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'spiral-fixed-extent', {
|
|
title: [
|
|
'Spiral race with fixed radius extent.',
|
|
'Click **next**, polygon animation should be corrent.',
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'next',
|
|
onclick: function () {
|
|
_currentDataIndex++;
|
|
_currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
|
|
chart.setOption({
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
text: 'enable animation',
|
|
onclick: function () {
|
|
chart.setOption({ animation: true });
|
|
}
|
|
}, {
|
|
text: 'disable animation',
|
|
onclick: function () {
|
|
chart.setOption({ animation: false });
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var _animationDuration = 5000;
|
|
var _animationDurationUpdate = 7000;
|
|
// var _animationEasingUpdate = 'elasticOut';
|
|
var _animationEasingUpdate = 'quadraticOut';
|
|
var _radianLabels = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpius', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'];
|
|
var _valOnRoundRadian = _radianLabels.length;
|
|
var _radianStep = Math.PI / 45;
|
|
var _barWidthValue = 0.4;
|
|
var _valOnRadiusStep = 4;
|
|
// angleAxis.startAngle is 90 by default.
|
|
var _startRadian = Math.PI / 2;
|
|
|
|
var _colors = [
|
|
{ border: 'green', inner: 'rgba(0,152,0,0.6)' },
|
|
{ border: 'red', inner: 'rgba(152,0,0,0.6)' },
|
|
{ border: 'blue', inner: 'rgba(0,0, 152,0.6)' },
|
|
];
|
|
var _currentDataIndex = 0;
|
|
var _datasourceList = [
|
|
[ [1, 3], [2, 6], [3, 9] ], // datasource 0
|
|
[ [1, 12], [2, 16], [3, 14] ], // datasource 1
|
|
[ [1, 17], [2, 22], [3, 19] ], // datasource 2
|
|
[ [1, 19], [2, 33], [3, 24] ],
|
|
[ [1, 24], [2, 42], [3, 29] ],
|
|
[ [1, 27], [2, 47], [3, 41] ],
|
|
[ [1, 36], [2, 52], [3, 52] ],
|
|
[ [1, 46], [2, 59], [3, 63] ],
|
|
[ [1, 60], [2, 63], [3, 69] ],
|
|
];
|
|
var _barNamesByOrdinal = {1: 'A', 2: 'B', 3: 'C'};
|
|
|
|
function getMaxRadius() {
|
|
var radius = 0;
|
|
var datasource = _datasourceList[_currentDataIndex];
|
|
for (var j = 0; j < datasource.length; j++) {
|
|
var dataItem = datasource[j];
|
|
radius = Math.max(radius, getSpiralValueOnRadius(dataItem[0], dataItem[1]));
|
|
}
|
|
return Math.ceil(radius * 1.2);
|
|
}
|
|
|
|
function getSpiralValueOnRadius(valOnStartRadius, valOnEndAngle) {
|
|
return valOnStartRadius + _valOnRadiusStep * (valOnEndAngle / _valOnRoundRadian);
|
|
}
|
|
function getSpiralRadius(startRadius, endRadian, radiusStep) {
|
|
return startRadius + radiusStep * ((_startRadian - endRadian) / (Math.PI * 2));
|
|
}
|
|
|
|
function renderItem(params, api) {
|
|
var children = [];
|
|
var dataIdx = params.dataIndex;
|
|
addShapes(params, api, children, api.value(0), api.value(1), _colors[dataIdx]);
|
|
|
|
return {
|
|
type: 'group',
|
|
children: children
|
|
};
|
|
}
|
|
|
|
function addShapes(params, api, children, valOnStartRadius, valOnEndRadian, color) {
|
|
var coords = api.coord([valOnStartRadius, valOnEndRadian]);
|
|
var startRadius = coords[2];
|
|
var endRadian = coords[3];
|
|
var widthRadius = api.coord([_barWidthValue, 0])[2];
|
|
addPolygon(params, children, widthRadius, startRadius, endRadian, color);
|
|
addLabel(params, children, widthRadius, startRadius, endRadian, color);
|
|
}
|
|
|
|
function addPolygon(params, children, widthRadius, startRadius, endRadian, color) {
|
|
children.push({
|
|
type: 'polygon',
|
|
shape: {
|
|
points: makeShapePoints(params, widthRadius, startRadius, endRadian)
|
|
},
|
|
extra: {
|
|
widthRadius: widthRadius,
|
|
startRadius: startRadius,
|
|
endRadian: endRadian,
|
|
transition: ['widthRadius', 'startRadius', 'endRadian']
|
|
},
|
|
style: {
|
|
lineWidth: 1,
|
|
fill: color.inner,
|
|
stroke: color.border
|
|
},
|
|
during: function (apiDuring) {
|
|
apiDuring.setShape('points', makeShapePoints(
|
|
params,
|
|
apiDuring.getExtra('widthRadius'),
|
|
apiDuring.getExtra('startRadius'),
|
|
apiDuring.getExtra('endRadian')
|
|
));
|
|
}
|
|
});
|
|
}
|
|
|
|
function makeShapePoints(params, widthRadius, startRadius, endRadian) {
|
|
var points = [];
|
|
var radiusStep = getRadiusStepByWidth(widthRadius);
|
|
// angleAxis.clockwise is true by default. So when rotate clickwisely, radian decreases.
|
|
for (
|
|
var iRadian = _startRadian, end = endRadian - _radianStep;
|
|
iRadian > end;
|
|
iRadian -= _radianStep
|
|
) {
|
|
iRadian < endRadian && (iRadian = endRadian);
|
|
var iRadius = getSpiralRadius(startRadius - widthRadius, iRadian, radiusStep);
|
|
points.push(convertToPolarPoint(params, iRadius, iRadian));
|
|
}
|
|
for (
|
|
var iRadian = endRadian;
|
|
iRadian < _startRadian + _radianStep;
|
|
iRadian += _radianStep
|
|
) {
|
|
iRadian > _startRadian && (iRadian = _startRadian);
|
|
var iRadius = getSpiralRadius(startRadius + widthRadius, iRadian, radiusStep);
|
|
points.push(convertToPolarPoint(params, iRadius, iRadian));
|
|
}
|
|
return points;
|
|
}
|
|
|
|
function getRadiusStepByWidth(widthRadius) {
|
|
return widthRadius / _barWidthValue * _valOnRadiusStep;
|
|
}
|
|
|
|
function addLabel(params, children, widthRadius, startRadius, endRadian, color) {
|
|
var point = makeLabelPosition(params, widthRadius, startRadius, endRadian);
|
|
children.push({
|
|
type: 'text',
|
|
x: point[0],
|
|
y: point[1],
|
|
transition: [],
|
|
extra: {
|
|
startRadius: startRadius,
|
|
endRadian: endRadian,
|
|
widthRadius: widthRadius,
|
|
transition: ['startRadius', 'endRadian', 'widthRadius']
|
|
},
|
|
style: {
|
|
text: makeText(endRadian),
|
|
fill: color.inner,
|
|
stroke: '#fff',
|
|
lineWidth: 3,
|
|
fontSize: 12,
|
|
align: 'center',
|
|
verticalAlign: 'middle',
|
|
rich: {
|
|
round: { fontSize: 16 },
|
|
percent: { fontSize: 14 }
|
|
}
|
|
},
|
|
z2: 50,
|
|
during: function (apiDuring) {
|
|
var endRadian = apiDuring.getExtra('endRadian');
|
|
var point = makeLabelPosition(
|
|
params,
|
|
apiDuring.getExtra('widthRadius'),
|
|
apiDuring.getExtra('startRadius'),
|
|
endRadian
|
|
);
|
|
apiDuring.setTransform('x', point[0]).setTransform('y', point[1]);
|
|
apiDuring.setStyle('text', makeText(endRadian));
|
|
}
|
|
});
|
|
|
|
function makeText(endRadian) {
|
|
var radian = _startRadian - endRadian;
|
|
var PI2 = Math.PI * 2;
|
|
var round = Math.floor(radian / PI2);
|
|
var percent = (((radian / PI2) % 1) * 100).toFixed(1) + '%';
|
|
return 'Round {round|' + round + '}\n{percent|' + percent + '}';
|
|
}
|
|
}
|
|
|
|
function makeLabelPosition(params, widthRadius, startRadius, endRadian) {
|
|
var radiusStep = getRadiusStepByWidth(widthRadius);
|
|
var iRadius = getSpiralRadius(startRadius, endRadian, radiusStep);
|
|
return convertToPolarPoint(params, iRadius, endRadian - 10 / iRadius);
|
|
}
|
|
|
|
function convertToPolarPoint(renderItemParams, radius, radian) {
|
|
return [
|
|
Math.cos(radian) * radius + renderItemParams.coordSys.cx,
|
|
-Math.sin(radian) * radius + renderItemParams.coordSys.cy
|
|
];
|
|
}
|
|
|
|
var option = {
|
|
animationDuration: _animationDuration,
|
|
animationDurationUpdate: _animationDurationUpdate,
|
|
animationEasingUpdate: _animationEasingUpdate,
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
},
|
|
tooltip: {},
|
|
angleAxis: {
|
|
type: 'value',
|
|
splitArea: { show: true },
|
|
axisLabel: {
|
|
formatter: function(val) {
|
|
return _radianLabels[val];
|
|
},
|
|
color: 'rgba(0,0,0,0.2)'
|
|
},
|
|
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
|
|
min: 0,
|
|
max: _valOnRoundRadian
|
|
},
|
|
radiusAxis: {
|
|
type: 'value',
|
|
interval: 1,
|
|
splitLine: { show: false },
|
|
axisLabel: {
|
|
color: 'rgba(0,0,0,0.6)',
|
|
formatter: function (value) {
|
|
return _barNamesByOrdinal[value] || '';
|
|
}
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
|
|
min: 0,
|
|
max: getMaxRadius()
|
|
},
|
|
polar: {},
|
|
series: [{
|
|
type: 'custom',
|
|
coordinateSystem: 'polar',
|
|
renderItem: renderItem
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'spiral-dynamic-extent', {
|
|
title: [
|
|
'Spiral race with dynamic radius extent.',
|
|
'Click **next**. Polygon animation should be corrent.',
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'next',
|
|
onclick: function () {
|
|
_currentDataIndex++;
|
|
_currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
|
|
chart.setOption({
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
},
|
|
radiusAxis: {
|
|
max: getMaxRadius()
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
text: 'enable animation',
|
|
onclick: function () {
|
|
chart.setOption({ animation: true });
|
|
}
|
|
}, {
|
|
text: 'disable animation',
|
|
onclick: function () {
|
|
chart.setOption({ animation: false });
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var _animationDuration = 1000;
|
|
var _animationDurationUpdate = 1000;
|
|
var _animationEasingUpdate = 'elasticOut';
|
|
var _datasourceList = [
|
|
[[1, 156]],
|
|
[[1, 54]],
|
|
[[1, 131]],
|
|
[[1, 32]],
|
|
[[1, 103]],
|
|
[[1, 66]],
|
|
];
|
|
var _valOnRadianMax = 200;
|
|
var _outerRadius = 100;
|
|
var _innerRadius = 85;
|
|
var _pointerInnerRadius = 40;
|
|
var _insidePanelRadius = 65;
|
|
var _currentDataIndex = 0;
|
|
|
|
function renderItem(params, api) {
|
|
var children = [];
|
|
var dataIdx = params.dataIndex;
|
|
var valOnRadian = api.value(1);
|
|
var coords = api.coord([api.value(0), valOnRadian]);
|
|
var polarEndRadian = coords[3];
|
|
var imageStyle = {
|
|
image: window.BAR_ROUND_GRADIENT_TEXTURE,
|
|
x: params.coordSys.cx - _outerRadius,
|
|
y: params.coordSys.cy - _outerRadius,
|
|
width: _outerRadius * 2,
|
|
height: _outerRadius * 2
|
|
};
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'image',
|
|
style: imageStyle,
|
|
clipPath: {
|
|
type: 'sector',
|
|
shape: {
|
|
cx: params.coordSys.cx,
|
|
cy: params.coordSys.cy,
|
|
r: _outerRadius,
|
|
r0: _innerRadius,
|
|
startAngle: 0,
|
|
// polor: anticlockwise-positive radian
|
|
// sector: clockwise-positive radian
|
|
endAngle: -polarEndRadian,
|
|
transition: 'endAngle',
|
|
enterFrom: { endAngle: 0 }
|
|
}
|
|
}
|
|
}, {
|
|
type: 'image',
|
|
style: imageStyle,
|
|
clipPath: {
|
|
type: 'polygon',
|
|
shape: {
|
|
points: makePionterPoints(params, polarEndRadian),
|
|
},
|
|
extra: {
|
|
polarEndRadian: polarEndRadian,
|
|
transition: 'polarEndRadian',
|
|
enterFrom: { polarEndRadian: 0 }
|
|
},
|
|
during: function (apiDuring) {
|
|
apiDuring.setShape(
|
|
'points',
|
|
makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
|
|
);
|
|
}
|
|
},
|
|
}, {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: params.coordSys.cx,
|
|
cy: params.coordSys.cy,
|
|
r: _insidePanelRadius
|
|
},
|
|
style: {
|
|
fill: '#fff',
|
|
shadowBlur: 25,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgb(0,0,50)'
|
|
}
|
|
}, {
|
|
type: 'text',
|
|
extra: {
|
|
valOnRadian: valOnRadian,
|
|
transition: 'valOnRadian',
|
|
enterFrom: { valOnRadian: 0 }
|
|
},
|
|
style: {
|
|
text: makeText(valOnRadian),
|
|
fontSize: 40,
|
|
x: params.coordSys.cx,
|
|
y: params.coordSys.cy,
|
|
fill: 'rgb(0,50,190)',
|
|
align: 'center',
|
|
verticalAlign: 'middle',
|
|
enterFrom: { opacity: 0 }
|
|
},
|
|
during: function (apiDuring) {
|
|
apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
|
|
function convertToPolarPoint(renderItemParams, radius, radian) {
|
|
return [
|
|
Math.cos(radian) * radius + renderItemParams.coordSys.cx,
|
|
-Math.sin(radian) * radius + renderItemParams.coordSys.cy
|
|
];
|
|
}
|
|
|
|
function makePionterPoints(renderItemParams, polarEndRadian) {
|
|
return [
|
|
convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
|
|
convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
|
|
convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
|
|
];
|
|
}
|
|
|
|
function makeText(valOnRadian) {
|
|
// Validate additive animation calc.
|
|
if (valOnRadian < -10) {
|
|
alert('illegal during val: ' + valOnRadian);
|
|
}
|
|
return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%'
|
|
}
|
|
|
|
var option = {
|
|
animationEasing: _animationEasingUpdate,
|
|
animationDuration: _animationDuration,
|
|
animationDurationUpdate: _animationDurationUpdate,
|
|
animationEasingUpdate: _animationEasingUpdate,
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
},
|
|
tooltip: {},
|
|
angleAxis: {
|
|
type: 'value',
|
|
startAngle: 0,
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { show: false },
|
|
splitLine: { show: false },
|
|
min: 0,
|
|
max: _valOnRadianMax
|
|
},
|
|
radiusAxis: {
|
|
type: 'value',
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { show: false },
|
|
splitLine: { show: false }
|
|
},
|
|
polar: {},
|
|
series: [{
|
|
type: 'custom',
|
|
coordinateSystem: 'polar',
|
|
renderItem: renderItem
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'texture-bar-by-clipPath', {
|
|
title: [
|
|
'Angle gradient | clipPath animation',
|
|
'click **next** to check the transition animation in both bar and text.'
|
|
],
|
|
option: option,
|
|
height: 300,
|
|
buttons: [{
|
|
text: 'next',
|
|
onclick: function () {
|
|
_currentDataIndex++;
|
|
_currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
|
|
chart.setOption({
|
|
dataset: {
|
|
source: _datasourceList[_currentDataIndex]
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
animation: false,
|
|
xAxis: {
|
|
max: 600,
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 10, end: 60 },
|
|
{ type: 'inside', start: 10, end: 60 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'blue',
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: -50,
|
|
cy: 50,
|
|
r: 30
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
},
|
|
textConfig: {
|
|
position: 'bottom'
|
|
},
|
|
textContent: {
|
|
style: {
|
|
text: 'xxxx',
|
|
fill: 'black',
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
},
|
|
data: [[221, 333], [129, 312]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'no-animation', {
|
|
title: [
|
|
'No-animation',
|
|
'(1) Move dataZoom, position should have no transition animation but move normally.',
|
|
'(2) Use dataZoom hide a data item, and then show it.',
|
|
'(3) click button to setOption merge: ',
|
|
' circle **disappears** and rect become **red border black bg**',
|
|
'(4) **Repeat (2)** after merged, should be correct.'
|
|
],
|
|
height: 300,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'go',
|
|
onclick: function () {
|
|
chart.dispatchAction({type: 'dataZoom', start: 10, end: 60});
|
|
}
|
|
}, {
|
|
text: 'click me to merge children',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
stroke: 'red',
|
|
lineWidth: 5
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var animationDuration = 5000;
|
|
var animationDurationUpdate = 4000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
max: 600
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 10, end: 60 },
|
|
{ type: 'inside', start: 10, end: 60 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'blue',
|
|
// enterFrom: { opacity: 0 }
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: -50,
|
|
cy: 50,
|
|
r: 30
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
// enterFrom: { opacity: 0 }
|
|
},
|
|
textConfig: {
|
|
position: 'bottom'
|
|
},
|
|
textContent: {
|
|
style: {
|
|
text: 'xxxx',
|
|
fill: 'black',
|
|
// enterFrom: { opacity: 0 }
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
},
|
|
data: [[221, 333], [129, 312]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'enter-animation-and-merge', {
|
|
title: [
|
|
'Transition animation:',
|
|
'(1) Move dataZoom, position should have transition animation.',
|
|
'(2) Use dataZoom hide a data item, and then show it, ensure the **fade in** animation not be interupted.',
|
|
'(3) click button to setOption merge: ',
|
|
' circle **disappears** and rect become **red border black bg**',
|
|
'(4) **Repeat (2)** after merged, should be correct.'
|
|
],
|
|
height: 300,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'click me to merge children',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: {
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
stroke: 'red',
|
|
lineWidth: 5
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var weatherIcons = {
|
|
'Sunny': './data/weather/sunny_128.png',
|
|
'Cloudy': './data/weather/cloudy_128.png',
|
|
'Showers': './data/weather/showers_128.png'
|
|
};
|
|
|
|
var animationDuration = 5000;
|
|
var animationDurationUpdate = 4000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
max: 500
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', end: 60 },
|
|
{ type: 'inside', end: 60 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
enterFrom: {
|
|
y: 0
|
|
},
|
|
children: [{
|
|
type: 'image',
|
|
style: {
|
|
image: weatherIcons.Cloudy,
|
|
height: 50
|
|
}
|
|
}]
|
|
};
|
|
},
|
|
data: [[121, 133], [129, 312]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'enter-animation2', {
|
|
title: [
|
|
'(1) Move dataZoom, position should have transition animation.',
|
|
'(2) Use dataZoom hide a data item, and then show it, ensure the **drop** animation not be interupted.',
|
|
],
|
|
height: 300,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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 = {
|
|
'Sunny': './data/weather/sunny_128.png',
|
|
'Cloudy': './data/weather/cloudy_128.png',
|
|
'Showers': './data/weather/showers_128.png'
|
|
};
|
|
|
|
var animationDuration = 2000;
|
|
var animationDurationUpdate = 1000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
max: 10000
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 20, end: 50 },
|
|
{ type: 'inside', start: 20, end: 50 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
var width = Math.abs(pos[0] % 200 - 100) + 20;
|
|
return {
|
|
type: 'image',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
style: {
|
|
image: weatherIcons.Showers,
|
|
width: width,
|
|
transition: 'width'
|
|
}
|
|
};
|
|
},
|
|
data: [[3321, 333], [4129, 312]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'style-animation', {
|
|
title: [
|
|
'Move dataZoom, make sure the "raining-cloud" size animation smooth.',
|
|
],
|
|
height: 300,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var animationDuration = 4000;
|
|
var animationDurationUpdate = 1000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
min: -200,
|
|
max: 400
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 20, end: 70 },
|
|
{ type: 'inside', start: 20, end: 70 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
rotation: pos[0] / 500 * Math.PI,
|
|
transition: ['rotation'],
|
|
originX: -50,
|
|
originY: 50,
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
enterFrom: { opacity: 0 }
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: -50,
|
|
cy: 50,
|
|
r: 30
|
|
},
|
|
style: {
|
|
fill: 'blue',
|
|
enterFrom: { opacity: 0 }
|
|
},
|
|
textConfig: {
|
|
position: 'bottom'
|
|
},
|
|
textContent: {
|
|
style: {
|
|
text: 'xxxx',
|
|
fill: 'black',
|
|
enterFrom: { opacity: 0 }
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
},
|
|
data: [[121, 333], [29, 333]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'transform-animation', {
|
|
height: 300,
|
|
title: [
|
|
'Move dataZoom:',
|
|
'position should **no** transition animation.',
|
|
'rotatino should **has** transition animation.',
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var animationDuration = 4000;
|
|
var animationDurationUpdate = 1000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
min: -200,
|
|
max: 400
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 20, end: 70 },
|
|
{ type: 'inside', start: 20, end: 70 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'rect',
|
|
position: pos,
|
|
transition: [],
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
enterFrom: { opacity: 0 }
|
|
}
|
|
};
|
|
},
|
|
data: [[121, 333], [29, 333]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'transform-animation-disabled', {
|
|
height: 230,
|
|
title: [
|
|
'Move dataZoom:',
|
|
'transform animation should has been **disabled**.',
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var animationDuration = 4000;
|
|
var animationDurationUpdate = 1000;
|
|
var option = {
|
|
animationDuration: animationDuration,
|
|
animationDurationUpdate: animationDurationUpdate,
|
|
xAxis: {
|
|
min: -200,
|
|
max: 400
|
|
},
|
|
yAxis: {
|
|
},
|
|
dataZoom: [
|
|
{ type: 'slider', start: 20, end: 70 },
|
|
{ type: 'inside', start: 20, end: 70 }
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
rotation: pos[0] / 500 * Math.PI,
|
|
transition: ['x', 'y', 'rotation'],
|
|
originX: -50,
|
|
originY: 50,
|
|
leaveTo: {scaleX: 0, scaleY: 0},
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -50,
|
|
y: 50,
|
|
width: 100,
|
|
height: 50,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'green',
|
|
enterFrom: { opacity: 0 }
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: -50,
|
|
cy: 50,
|
|
r: 30
|
|
},
|
|
style: {
|
|
fill: 'blue',
|
|
enterFrom: { opacity: 0 }
|
|
},
|
|
textConfig: {
|
|
position: 'bottom'
|
|
},
|
|
textContent: {
|
|
style: {
|
|
text: 'xxxx',
|
|
fill: 'black',
|
|
enterFrom: { opacity: 0 }
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
},
|
|
data: [[121, 333], [29, 333]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'leave-animation', {
|
|
height: 300,
|
|
title: [
|
|
'Move dataZoom to "out" a item:',
|
|
'**Leave animation** on scale should be performed on rect and circle, but not on text.',
|
|
'The item should **finally be removed**.',
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |