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