| <!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> |
