Spaces:
Runtime error
Runtime error
| <!-- | |
| THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=pie-parliament-transition | |
| --> | |
| <html lang="en" style="height: 100%"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <body style="height: 100%; margin: 0"> | |
| <div id="container" style="height: 100%"></div> | |
| <script | |
| type="text/javascript" | |
| src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js" | |
| ></script> | |
| <script type="text/javascript"> | |
| var dom = document.getElementById("container"); | |
| var myChart = echarts.init(dom, null, { | |
| renderer: "canvas", | |
| useDirtyRect: false, | |
| }); | |
| var app = {}; | |
| var option; | |
| const data = [ | |
| { value: 40, name: "Túrázás" }, | |
| { value: 30, name: "Városnézés" }, | |
| { value: 5, name: "Borturisztika" }, | |
| { value: 5, name: "Állatkert látogatás" }, | |
| { value: 20, name: "Fotózás" }, | |
| ]; | |
| const defaultPalette = ["#E667AC", "#3D5176", "#CEBDCB", "#6D6E6E", "#FFC423" ] | |
| const radius = ["20%", "80%"]; | |
| const pieOption = { | |
| series: [ | |
| { | |
| type: "pie", | |
| id: "distribution", | |
| radius: radius, | |
| label: { | |
| show: true, | |
| position: "outside", | |
| formatter: "{b} ({d}%)", | |
| fontSize: 20, | |
| color: "#A0ADBE", | |
| }, | |
| color:defaultPalette, | |
| universalTransition: true, | |
| animationDurationUpdate: 1000, | |
| data: data, | |
| }, | |
| ], | |
| }; | |
| const parliamentOption = (function () { | |
| let sum = data.reduce(function (sum, cur) { | |
| return sum + cur.value; | |
| }, 0); | |
| let angles = []; | |
| let startAngle = -Math.PI / 2; | |
| let curAngle = startAngle; | |
| data.forEach(function (item) { | |
| angles.push(curAngle); | |
| curAngle += (item.value / sum) * Math.PI * 2; | |
| }); | |
| angles.push(startAngle + Math.PI * 2); | |
| function parliamentLayout( | |
| startAngle, | |
| endAngle, | |
| totalAngle, | |
| r0, | |
| r1, | |
| size | |
| ) { | |
| let rowsCount = Math.ceil((r1 - r0) / size); | |
| let points = []; | |
| let r = r0; | |
| for (let i = 0; i < rowsCount; i++) { | |
| // Recalculate size | |
| let totalRingSeatsNumber = Math.round((totalAngle * r) / size); | |
| let newSize = (totalAngle * r) / totalRingSeatsNumber; | |
| for ( | |
| let k = Math.floor((startAngle * r) / newSize) * newSize; | |
| k < Math.floor((endAngle * r) / newSize) * newSize - 1e-6; | |
| k += newSize | |
| ) { | |
| let angle = k / r; | |
| let x = Math.cos(angle) * r; | |
| let y = Math.sin(angle) * r; | |
| points.push([x, y]); | |
| } | |
| r += size; | |
| } | |
| return points; | |
| } | |
| return { | |
| series: { | |
| type: "custom", | |
| id: "distribution", | |
| data: data, | |
| coordinateSystem: undefined, | |
| universalTransition: true, | |
| animationDurationUpdate: 1000, | |
| renderItem: function (params, api) { | |
| var idx = params.dataIndex; | |
| var viewSize = Math.min(api.getWidth(), api.getHeight()); | |
| var r0 = ((parseFloat(radius[0]) / 100) * viewSize) / 2; | |
| var r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2; | |
| var cx = api.getWidth() * 0.5; | |
| var cy = api.getHeight() * 0.5; | |
| var size = viewSize / 67; | |
| var points = parliamentLayout( | |
| angles[idx], | |
| angles[idx + 1], | |
| Math.PI * 2, | |
| r0, | |
| r1, | |
| size + 2 | |
| ); | |
| console.log(points.length); | |
| return { | |
| type: "group", | |
| children: points.map(function (pt) { | |
| return { | |
| type: "circle", | |
| autoBatch: true, | |
| shape: { | |
| cx: cx + pt[0], | |
| cy: cy + pt[1], | |
| r: size / 2, | |
| }, | |
| style: { | |
| fill: defaultPalette[idx % defaultPalette.length], | |
| }, | |
| }; | |
| }), | |
| }; | |
| }, | |
| }, | |
| }; | |
| })(); | |
| let currentOption = (option = pieOption); | |
| setInterval(function () { | |
| currentOption = | |
| currentOption === pieOption ? parliamentOption : pieOption; | |
| myChart.setOption(currentOption); | |
| }, 6000); | |
| if (option && typeof option === "object") { | |
| myChart.setOption(option); | |
| } | |
| window.addEventListener("resize", myChart.resize); | |
| </script> | |
| </body> | |
| </html> | |