Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plainheart/echarts-extension-amap
🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/plainheart/echarts-extension-amap
amap amap-extension amap-v2 autonavi data-visualization echarts echarts-amap echarts-extension echarts4 echarts5 gaode map
Last synced: 5 days ago
JSON representation
🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
- Host: GitHub
- URL: https://github.com/plainheart/echarts-extension-amap
- Owner: plainheart
- License: mit
- Created: 2019-02-24T12:38:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T09:27:51.000Z (5 months ago)
- Last Synced: 2025-02-08T10:11:45.034Z (12 days ago)
- Topics: amap, amap-extension, amap-v2, autonavi, data-visualization, echarts, echarts-amap, echarts-extension, echarts4, echarts5, gaode, map
- Language: JavaScript
- Homepage: https://github.com/plainheart/echarts-extension-amap
- Size: 920 KB
- Stars: 258
- Watchers: 2
- Forks: 82
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - 高德地图扩展 - Apache ECharts 高德地图扩展，可以在高德地图上展现点图，线图，热力图等可视化。 (Extensions / Videos)
README
[](https://www.npmjs.org/package/echarts-extension-amap)
[](https://github.com/plainheart/echarts-extension-amap/actions/workflows/build.yml)
[](https://npmcharts.com/compare/echarts-extension-amap?minimal=true)
[](https://www.jsdelivr.com/package/npm/echarts-extension-amap)
[](https://github.com/plainheart/echarts-extension-amap/blob/master/LICENSE)
## AMap extension for Apache ECharts
[中文说明](https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md)
[Online example on CodePen](https://codepen.io/plainheart/pen/qBbdNYx)
This 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).
### Examples
Scatter: [examples/scatter.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/scatter.html)
Heatmap: [examples/heatmap.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/heatmap.html)
Lines: [examples/lines.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/lines.html)
Pie: [examples/pie.html](https://github.com/plainheart/echarts-extension-amap/blob/master/examples/pie.html) (**Since v1.11.0**)
### Installation
```shell
npm install echarts-extension-amap --save
```
### Import
Import packaged distribution file `echarts-extension-amap.min.js` and add AMap API script and ECharts script.
```html
```
You can also import this extension by `require` or `import` if you are using `webpack` or any other bundler.
```js
// use require
require('echarts');
require('echarts-extension-amap');
// use import
import * as echarts from 'echarts';
import 'echarts-extension-amap';
```
> 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`.
**Use CDN**
[**jsDelivr**](https://www.jsdelivr.com/)
Use the latest version
[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)
Use a specific version
[https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js](https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js)
[**unpkg**](https://unpkg.com/)
Use the latest version
[https://unpkg.com/echarts-extension-amap/dist/echarts-extension-amap.min.js](https://unpkg.com/echarts-extension-amap/dist/echarts-extension-amap.min.js)
Use a specific version
[https://unpkg.com/[email protected]/dist/echarts-extension-amap.min.js](https://unpkg.com/[email protected]/dist/echarts-extension-amap.min.js)
This extension will register itself as a component of `echarts` after it is imported.
**Apache ECharts 5 import on demand**
Apache 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:
```ts
// import scatter, effectScatter and amap extension component on demand
import * as echarts from 'echarts/core';
import {
ScatterChart,
ScatterSeriesOption,
EffectScatterChart,
EffectScatterSeriesOption
} from 'echarts/charts';
import {
TooltipComponent,
TitleComponentOption
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import {
install as AMapComponent,
AMapComponentOption
} from 'echarts-extension-amap/export';
// import the official type definition for AMap 2.0
import '@amap/amap-jsapi-types';
// compose required options
type ECOption = echarts.ComposeOption<
| ScatterSeriesOption
| EffectScatterSeriesOption
| TitleComponentOption
// unite AMapComponentOption with the initial options of AMap `AMap.MapOptions`
> & AMapComponentOption;
// register renderers, components and charts
echarts.use([
CanvasRenderer,
TooltipComponent,
AMapComponent,
ScatterChart,
EffectScatterChart
]);
// define ECharts option
const option: ECOption = {
// AMap extension option
amap: {
// ...
},
title: {
// ...
},
series: [
{
type: 'scatter',
// Use AMap coordinate system
coordinateSystem: 'amap',
// ...
}
]
// ...
};
```
### Usage
```js
option = {
// load amap component
amap: {
// enable 3D mode
// Note that it's suggested to enable 3D mode to improve echarts rendering.
viewMode: '3D',
// initial options of AMap
// See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
// initial map center [lng, lat]
center: [108.39, 39.9],
// initial map zoom
zoom: 4,
// whether the map and echarts automatically handles browser window resize to update itself.
resizeEnable: true,
// customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
mapStyle: 'amap://styles/dark',
// whether echarts layer should be rendered when the map is moving. Default is true.
// if false, it will only be re-rendered after the map `moveend`.
// It's better to set this option to false if data is large.
renderOnMoving: true,
// the zIndex of echarts layer for AMap, default value is 2000.
// deprecated since v1.9.0, use `echartsLayerInteractive` instead.
echartsLayerZIndex: 2019,
// whether echarts layer is interactive. Default value is true
// supported since v1.9.0
echartsLayerInteractive: true,
// whether to enable large mode. Default value is false
// supported since v1.9.0
largeMode: false
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
// There are some bugs about it, we can use `amap.add` instead.
// Refer to the codes at the bottom.
// More initial options...
},
series: [
{
type: 'scatter',
// use `amap` as the coordinate system
coordinateSystem: 'amap',
// data items [[lng, lat, value], [lng, lat, value], ...]
data: [[120, 30, 8], [120.1, 30.2, 20]],
encode: {
// encode the third element of data item as the `value` dimension
value: 2
}
}
]
};
// Get AMap extension component
var amapComponent = chart.getModel().getComponent('amap');
// Get the instance of AMap
var amap = amapComponent.getAMap();
// Add some controls provided by AMap.
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// Add SatelliteLayer and RoadNetLayer to map
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
amap.add([satelliteLayer, roadNetLayer]);
// Add a marker to map
amap.add(new AMap.Marker({
position: [115, 35]
}));
// Make the overlay layer of AMap interactive
amapComponent.setEChartsLayerInteractive(false);
```