| <!-- | |
| 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"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/dat.gui.min.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| <script src="lib/testHelper.js"></script> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <div id="main3"></div> | |
| <div id="main4"></div> | |
| <div id="main5"></div> | |
| <div id="main6"></div> | |
| <div id="main7"></div> | |
| <div id="main8"></div> | |
| <div id="main9"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var pieRadius = 20; | |
| var option = { | |
| calendar: { | |
| top: 'middle', | |
| left: 'center', | |
| cellSize: pieRadius * 3, | |
| orient: 'vertical', | |
| range: ['2022-05'] | |
| }, | |
| tooltip: {}, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'Calendar', | |
| coordinateSystem: 'calendar', | |
| radius: pieRadius, | |
| // center is date when displayed on calendar | |
| center: '2022-05-16', | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ], | |
| label: { | |
| show: false | |
| } | |
| }, | |
| { | |
| type: 'pie', | |
| name: 'Calendar', | |
| coordinateSystem: 'calendar', | |
| radius: pieRadius, | |
| center: '2022-05-05', | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ], | |
| label: { | |
| show: false | |
| } | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main1', { | |
| title: ['Pie series on Calendar'], | |
| option: option | |
| }) | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'map/js/china' | |
| ], function (echarts) { | |
| var option = { | |
| geo: { | |
| map: 'china', | |
| roam: true | |
| }, | |
| tooltip: {}, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'Geo', | |
| coordinateSystem: 'geo', | |
| radius: 20, | |
| center: [120, 30], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| }, | |
| { | |
| type: 'pie', | |
| name: 'Geo', | |
| coordinateSystem: 'geo', | |
| radius: 20, | |
| center: '北京', | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main2', { | |
| title: ['Pie series on Geo Map'], | |
| option: option | |
| }) | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/svg/Map_of_Iceland.svg' | |
| ], function (echarts, svg) { | |
| echarts.registerMap('Map_of_Iceland', { | |
| svg: svg | |
| }); | |
| var option = { | |
| geo: { | |
| map: 'Map_of_Iceland', | |
| roam: true, | |
| }, | |
| tooltip: {}, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'Geo SVG', | |
| coordinateSystem: 'geo', | |
| radius: 20, | |
| center: [1062, 955], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main3', { | |
| title: ['Pie series on Geo SVG'], | |
| option: option | |
| }) | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| tooltip: {}, | |
| xAxis: { | |
| type: 'category', | |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] | |
| }, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'Cartesian2D(Category Axes)', | |
| coordinateSystem: 'cartesian2d', | |
| radius: 20, | |
| center: ['Tue', 'E'], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main4', { | |
| title: ['Pie series on Cartesian2D', 'Category Axes'], | |
| option: option | |
| }) | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| tooltip: {}, | |
| xAxis: { | |
| type: 'category', | |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |
| }, | |
| yAxis: { | |
| type: 'value' | |
| }, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'Cartesian2D(category axis & value axis)', | |
| coordinateSystem: 'cartesian2d', | |
| radius: 20, | |
| center: ['Tue', 230], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| }, | |
| { | |
| // currently it needs data to calculate axis extend | |
| data: [150, 230, 224, 218, 135, 147, 260], | |
| type: 'line', | |
| showSymbol: false, | |
| lineStyle: { | |
| width: 0 | |
| } | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main5', { | |
| title: ['Pie series on Cartesian2D', 'category axis & value axis (not perfectly supported)'], | |
| option: option | |
| }) | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/usa.json' | |
| ], function (echarts, usaJSON) { | |
| echarts.registerMap('USA', usaJSON, { | |
| Alaska: { | |
| left: -131, | |
| top: 25, | |
| width: 15 | |
| }, | |
| Hawaii: { | |
| left: -110, | |
| top: 28, | |
| width: 5 | |
| }, | |
| 'Puerto Rico': { | |
| left: -76, | |
| top: 26, | |
| width: 2 | |
| } | |
| }); | |
| function randomPieSeries(center, radius) { | |
| const data = ['A', 'B', 'C', 'D'].map((t) => { | |
| return { | |
| value: Math.round(Math.random() * 100), | |
| name: 'Category ' + t | |
| }; | |
| }); | |
| return { | |
| type: 'pie', | |
| coordinateSystem: 'geo', | |
| tooltip: { | |
| formatter: '{b}: {c} ({d}%)' | |
| }, | |
| label: { | |
| show: false | |
| }, | |
| labelLine: { | |
| show: false | |
| }, | |
| animationDuration: 0, | |
| radius, | |
| center, | |
| data | |
| }; | |
| } | |
| var option = { | |
| geo: { | |
| map: 'USA', | |
| roam: true, | |
| itemStyle: { | |
| areaColor: '#e7e8ea' | |
| } | |
| }, | |
| tooltip: {}, | |
| legend: {}, | |
| series: [ | |
| randomPieSeries([-86.753504, 33.01077], 15), | |
| randomPieSeries([-116.853504, 39.8], 25), | |
| randomPieSeries([-99, 31.5], 30), | |
| // This name string should work | |
| randomPieSeries('Alaska', 20) | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main7', { | |
| title: ['Pie series on Geo Map', 'A pie series should be displayed at `**Alaska**`'], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'extension/bmap' | |
| ], function (echarts) { | |
| var option = { | |
| bmap: { | |
| center: [115, 30], | |
| zoom: 5, | |
| roam: true, | |
| }, | |
| tooltip: {}, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'BMap', | |
| coordinateSystem: 'bmap', | |
| radius: 20, | |
| center: [120, 30], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| }, | |
| { | |
| type: 'pie', | |
| name: 'No CRS', | |
| // coordinateSystem: 'bmap', | |
| radius: 20, | |
| center: [110, 36], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main8', { | |
| title: ['Pie series on BMap'], | |
| option: option, | |
| buttons: [{ | |
| text: 'Convert point [120, 30] to pixel', | |
| onclick: function () { | |
| alert(chart.convertToPixel('bmap', [120, 30])); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c0ee23ad2324c26661065de94f5b5676"></script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'https://fastly.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.js' | |
| ], function (echarts) { | |
| var option = { | |
| amap: { | |
| viewMode: '3d', | |
| center: [115, 30], | |
| zoom: 5 | |
| }, | |
| tooltip: {}, | |
| series: [ | |
| { | |
| type: 'pie', | |
| name: 'AMap', | |
| coordinateSystem: 'amap', | |
| radius: 20, | |
| center: [120, 30], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| }, | |
| { | |
| type: 'pie', | |
| name: 'No CRS', | |
| // coordinateSystem: 'amap', | |
| radius: 20, | |
| center: [110, 36], | |
| data: [ | |
| { value: 1048, name: 'A' }, | |
| { value: 735, name: 'B' }, | |
| { value: 580, name: 'C' }, | |
| { value: 484, name: 'D' }, | |
| { value: 300, name: 'E' } | |
| ] | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'main9', { | |
| title: ['Pie series on AMap'], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |