Awesome
Google Map extension for Apache ECharts
This is a Google Map extension for Apache ECharts which is used to display visualizations such as Scatter, Lines, Heatmap, and Pie.
Examples
Installation
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.
<!-- import JavaScript API of Google Map, please replace the key with your own key -->
<script src="https://maps.googleapis.com/maps/api/js?key={key}"></script>
<!-- import echarts -->
<script src="/path/to/echarts.min.js"></script>
<!-- import echarts-extension-gmap -->
<script src="dist/echarts-extension-gmap.min.js"></script>
You can also import this extension by require
or import
if you are using webpack or any other bundler.
// use require
require('echarts');
require('echarts-extension-gmap');
// use import
import * as echarts from 'echarts';
import 'echarts-extension-gmap';
Or use a CDN
<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>
<script src="https://unpkg.com/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>
This extension will register itself as a component of echarts
after it is imported.
Usage
This extension can be configured simply like geo.
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);