{"id":13531282,"url":"https://github.com/plainheart/echarts-extension-amap","last_synced_at":"2025-05-15T12:02:52.030Z","repository":{"id":40002678,"uuid":"172335697","full_name":"plainheart/echarts-extension-amap","owner":"plainheart","description":"🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)","archived":false,"fork":false,"pushed_at":"2025-02-20T06:58:04.000Z","size":1000,"stargazers_count":268,"open_issues_count":6,"forks_count":82,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T02:14:52.000Z","etag":null,"topics":["amap","amap-extension","amap-v2","autonavi","data-visualization","echarts","echarts-amap","echarts-extension","echarts4","echarts5","gaode","map"],"latest_commit_sha":null,"homepage":"https://github.com/plainheart/echarts-extension-amap","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plainheart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-24T12:38:24.000Z","updated_at":"2025-04-12T03:06:23.000Z","dependencies_parsed_at":"2024-06-18T16:40:55.664Z","dependency_job_id":"da06186a-1860-4c2d-b6fc-b0bfc962ef66","html_url":"https://github.com/plainheart/echarts-extension-amap","commit_stats":{"total_commits":202,"total_committers":3,"mean_commits":67.33333333333333,"dds":0.03960396039603964,"last_synced_commit":"21fb95de4a3710f546ccec170db281c4f84fb861"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-amap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-amap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-amap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-amap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plainheart","download_url":"https://codeload.github.com/plainheart/echarts-extension-amap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amap","amap-extension","amap-v2","autonavi","data-visualization","echarts","echarts-amap","echarts-extension","echarts4","echarts5","gaode","map"],"created_at":"2024-08-01T07:01:01.722Z","updated_at":"2025-05-15T12:02:52.003Z","avatar_url":"https://github.com/plainheart.png","language":"JavaScript","funding_links":[],"categories":["Extensions"],"sub_categories":["Videos"],"readme":"[![NPM version](https://img.shields.io/npm/v/echarts-extension-amap.svg?style=flat)](https://www.npmjs.org/package/echarts-extension-amap)\n[![Build Status](https://github.com/plainheart/echarts-extension-amap/actions/workflows/build.yml/badge.svg)](https://github.com/plainheart/echarts-extension-amap/actions/workflows/build.yml)\n[![NPM Downloads](https://img.shields.io/npm/dm/echarts-extension-amap.svg)](https://npmcharts.com/compare/echarts-extension-amap?minimal=true)\n[![jsDelivr Downloads](https://data.jsdelivr.com/v1/package/npm/echarts-extension-amap/badge?style=rounded)](https://www.jsdelivr.com/package/npm/echarts-extension-amap)\n[![License](https://img.shields.io/npm/l/echarts-extension-amap.svg)](https://github.com/plainheart/echarts-extension-amap/blob/master/LICENSE)\n\n## AMap extension for Apache ECharts\n\n[中文说明](https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md)\n\n[Online example on CodePen](https://codepen.io/plainheart/pen/qBbdNYx)\n\nThis is an AMap extension for [Apache ECharts](https://echarts.apache.org/en/index.html) which is used to display visualizations such as [Scatter](https://echarts.apache.org/en/option.html#series-scatter), [Lines](https://echarts.apache.org/en/option.html#series-lines), [Heatmap](https://echarts.apache.org/en/option.html#series-heatmap), and [Pie](https://echarts.apache.org/en/option.html#series-pie).\n\n### Examples\n\nScatter: [examples/scatter.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/scatter.html)\n\n![Preview-Scatter](https://user-images.githubusercontent.com/26999792/53300484-e2979680-3882-11e9-8fb4-143c4ca4c416.png)\n\nHeatmap: [examples/heatmap.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/heatmap.html)\n\n![Preview-Heatmap](https://user-images.githubusercontent.com/26999792/101314208-fadb7880-3892-11eb-902a-8f6f41ffe0fc.png)\n\nLines: [examples/lines.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/lines.html)\n\n![Preview-Lines](https://user-images.githubusercontent.com/26999792/101313379-fca43c80-3890-11eb-9dea-46230dc432d5.gif)\n\nPie: [examples/pie.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/pie.html) (**Since v1.11.0**)\n\n![Preview-Pie](https://user-images.githubusercontent.com/26999792/193215980-cd6736f5-a63d-4085-8012-d519e9e78398.png)\n\n### Installation\n\n```shell\nnpm install echarts-extension-amap --save\n```\n\n### Import\n\nImport packaged distribution file `echarts-extension-amap.min.js` and add AMap API script and ECharts script.\n\n```html\n\u003c!-- import JavaScript API of AMap, please replace the ak with your own key and specify the version and plugins you need --\u003e\n\u003c!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 --\u003e\n\u003cscript src=\"https://webapi.amap.com/maps?v=1.4.15\u0026key={ak}\u0026plugin=AMap.Scale,AMap.ToolBar\"\u003e\u003c/script\u003e\n\u003c!-- import ECharts --\u003e\n\u003cscript src=\"/path/to/echarts.min.js\"\u003e\u003c/script\u003e\n\u003c!-- import echarts-extension-amap --\u003e\n\u003cscript src=\"dist/echarts-extension-amap.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can also import this extension by `require` or `import` if you are using `webpack` or any other bundler.\n\n```js\n// use require\nrequire('echarts');\nrequire('echarts-extension-amap');\n\n// use import\nimport * as echarts from 'echarts';\nimport 'echarts-extension-amap';\n```\n\n\u003e If importing dynamically the API script is needed, it's suggested to use [amap-jsapi-loader](https://www.npmjs.com/package/@amap/amap-jsapi-loader) or wrap a dynamic and asynchronized script loader manually through `Promise`.\n\n**Use CDN**\n\n[**jsDelivr**](https://www.jsdelivr.com/)\n\nUse the latest version\n\n[https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js](https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js)\n\nUse a specific version\n\n[https://cdn.jsdelivr.net/npm/echarts-extension-amap@1.12.0/dist/echarts-extension-amap.min.js](https://cdn.jsdelivr.net/npm/echarts-extension-amap@1.12.0/dist/echarts-extension-amap.min.js)\n\n[**unpkg**](https://unpkg.com/)\n\nUse the latest version\n\n[https://unpkg.com/echarts-extension-amap/dist/echarts-extension-amap.min.js](https://unpkg.com/echarts-extension-amap/dist/echarts-extension-amap.min.js)\n\nUse a specific version\n\n[https://unpkg.com/echarts-extension-amap@1.12.0/dist/echarts-extension-amap.min.js](https://unpkg.com/echarts-extension-amap@1.12.0/dist/echarts-extension-amap.min.js)\n\nThis extension will register itself as a component of `echarts` after it is imported.\n\n**Apache ECharts 5 import on demand**\n\nApache ECharts has provided us the [new tree-shaking API](https://echarts.apache.org/en/tutorial.html#Use%20ECharts%20with%20bundler%20and%20NPM) since v5.0.1. This is how to use it in this extension:\n\n```ts\n// import scatter, effectScatter and amap extension component on demand\nimport * as echarts from 'echarts/core';\nimport {\n  ScatterChart,\n  ScatterSeriesOption,\n  EffectScatterChart,\n  EffectScatterSeriesOption\n} from 'echarts/charts';\nimport {\n  TooltipComponent,\n  TitleComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  install as AMapComponent,\n  AMapComponentOption\n} from 'echarts-extension-amap/export';\n\n// import the official type definition for AMap 2.0\nimport '@amap/amap-jsapi-types';\n\n// compose required options\ntype ECOption = echarts.ComposeOption\u003c\n  | ScatterSeriesOption\n  | EffectScatterSeriesOption\n  | TitleComponentOption\n  // unite AMapComponentOption with the initial options of AMap `AMap.MapOptions`\n\u003e \u0026 AMapComponentOption\u003cAMap.MapOptions\u003e;\n\n// register renderers, components and charts\necharts.use([\n  CanvasRenderer,\n  TooltipComponent,\n  AMapComponent,\n  ScatterChart,\n  EffectScatterChart\n]);\n\n// define ECharts option\nconst option: ECOption = {\n  // AMap extension option\n  amap: {\n    // ...\n  },\n  title: {\n    // ...\n  },\n  series: [\n    {\n      type: 'scatter',\n      // Use AMap coordinate system\n      coordinateSystem: 'amap',\n      // ...\n    }\n  ]\n  // ...\n};\n```\n\n### Usage\n\n```js\noption = {\n  // load amap component\n  amap: {\n    // enable 3D mode\n    // Note that it's suggested to enable 3D mode to improve echarts rendering.\n    viewMode: '3D',\n    // initial options of AMap\n    // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details\n    // initial map center [lng, lat]\n    center: [108.39, 39.9],\n    // initial map zoom\n    zoom: 4,\n    // whether the map and echarts automatically handles browser window resize to update itself.\n    resizeEnable: true,\n    // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details\n    mapStyle: 'amap://styles/dark',\n    // whether echarts layer should be rendered when the map is moving. Default is true.\n    // if false, it will only be re-rendered after the map `moveend`.\n    // It's better to set this option to false if data is large.\n    renderOnMoving: true,\n    // the zIndex of echarts layer for AMap, default value is 2000.\n    // deprecated since v1.9.0, use `echartsLayerInteractive` instead.\n    echartsLayerZIndex: 2019,\n    // whether echarts layer is interactive. Default value is true\n    // supported since v1.9.0\n    echartsLayerInteractive: true,\n    // whether to enable large mode. Default value is false\n    // supported since v1.9.0\n    largeMode: false\n    // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.\n    // There are some bugs about it, we can use `amap.add` instead.\n    // Refer to the codes at the bottom.\n\n    // More initial options...\n  },\n  series: [\n    {\n      type: 'scatter',\n      // use `amap` as the coordinate system\n      coordinateSystem: 'amap',\n      // data items [[lng, lat, value], [lng, lat, value], ...]\n      data: [[120, 30, 8], [120.1, 30.2, 20]],\n      encode: {\n        // encode the third element of data item as the `value` dimension\n        value: 2\n      }\n    }\n  ]\n};\n\n// Get AMap extension component\nvar amapComponent = chart.getModel().getComponent('amap');\n// Get the instance of AMap\nvar amap = amapComponent.getAMap();\n// Add some controls provided by AMap.\namap.addControl(new AMap.Scale());\namap.addControl(new AMap.ToolBar());\n// Add SatelliteLayer and RoadNetLayer to map\nvar satelliteLayer = new AMap.TileLayer.Satellite();\nvar roadNetLayer = new AMap.TileLayer.RoadNet();\namap.add([satelliteLayer, roadNetLayer]);\n// Add a marker to map\namap.add(new AMap.Marker({\n  position: [115, 35]\n}));\n// Make the overlay layer of AMap interactive\namapComponent.setEChartsLayerInteractive(false);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplainheart%2Fecharts-extension-amap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplainheart%2Fecharts-extension-amap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplainheart%2Fecharts-extension-amap/lists"}