echarts-extension-gmap
Advanced tools
Weekly downloads
Changelog
v1.5.0
pie
series. See also Displaying Pie charts in more coordinate systems and example.convertToPixel
API and convertFromPixel
API.chart.clear()
Readme
This is a Google Map extension for Apache ECharts which is used to display visualizations such as Scatter, Lines, Heatmap, and Pie.
npm install echarts-extension-gmap --save
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
.
require('echarts');
require('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.
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);
FAQs
A Google Map(https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)
The npm package echarts-extension-gmap receives a total of 354 weekly downloads. As such, echarts-extension-gmap popularity was classified as not popular.
We found that echarts-extension-gmap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.