Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plainheart/echarts-extension-gmap
π A Google Map (https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/plainheart/echarts-extension-gmap
data-visualization echarts echarts-extension echarts-gmap echarts-google-map echarts-map echarts4 echarts5 google google-maps
Last synced: 20 days ago
JSON representation
π A Google Map (https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)
- Host: GitHub
- URL: https://github.com/plainheart/echarts-extension-gmap
- Owner: plainheart
- License: mit
- Created: 2020-06-07T11:36:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T05:05:57.000Z (3 months ago)
- Last Synced: 2024-11-13T19:05:34.294Z (30 days ago)
- Topics: data-visualization, echarts, echarts-extension, echarts-gmap, echarts-google-map, echarts-map, echarts4, echarts5, google, google-maps
- Language: JavaScript
- Homepage: https://github.com/plainheart/echarts-extension-gmap
- Size: 637 KB
- Stars: 48
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - echarts-extension-gmap - A [Google Map](https://www.google.com/maps) extension for Apache ECharts. (Extensions / Videos)
README
[](https://www.npmjs.org/package/echarts-extension-gmap)
[](https://github.com/plainheart/echarts-extension-gmap/actions/workflows/build.yml)
[](https://npmcharts.com/compare/echarts-extension-gmap?minimal=true)
[](https://www.jsdelivr.com/package/npm/echarts-extension-gmap)
[](https://github.com/plainheart/echarts-extension-gmap/blob/master/LICENSE)
## Google Map extension for Apache ECharts
[δΈζθ―΄ζ](https://github.com/plainheart/echarts-extension-gmap/blob/master/README.zh-CN.md)
[Online example on CodePen](https://codepen.io/plainheart/pen/VweLGbR)
This is a Google Map 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](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/scatter.html)
[Lines](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/lines.html)
[Heatmap](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/heatmap.html)
[Pie](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/pie.html)
### Installation
```shell
npm install echarts-extension-gmap --save
```
### Import
Import packaged distribution file `echarts-extension-gmap.min.js` and add Google Map 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-gmap');
// use import
import * as echarts from 'echarts';
import 'echarts-extension-gmap';
```
Or use a CDN
[jsdelivr](https://www.jsdelivr.com/)
```html
```
[unpkg](https://unpkg.com/)
```html
```
This extension will register itself as a component of `echarts` after it is imported.
### Usage
This extension can be configured simply like [geo](https://echarts.apache.org/en/option.html#geo).
```js
option = {
// load gmap component
gmap: {
// initial options of Google Map
// See https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions for details
// initial map center, accepts an array like [lng, lat] or an object like { lng, lat }
center: [108.39, 39.9],
// center: { lng: 108.39, lat: 39.9 },
// initial map zoom
zoom: 4,
// whether echarts layer should be rendered when the map is moving. `true` by default.
// 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 Google Map. `2000` by default.
echartsLayerZIndex: 2019,
// whether to enable gesture handling. `true` by default.
// since v1.4.0
roam: true
// More initial options...
},
series: [
{
type: 'scatter',
// use `gmap` as the coordinate system
coordinateSystem: 'gmap',
// 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,
lng: 0,
lat: 1
}
}
]
};
// Get the instance of Google Map
var gmap = chart
.getModel()
.getComponent('gmap')
.getGoogleMap();
// Add some markers to map
var marker = new google.maps.Marker({ position: gmap.getCenter() });
marker.setMap(gmap);
// Add TrafficLayer to map
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(gmap);
```