echarts-extension-gmap

Google Map extension for Apache ECharts

中文说明

Online example on CodePen

This is a Google Map extension for Apache ECharts which is used to display visualizations such as Scatter, Lines, Heatmap, and Pie.

Examples

Scatter

Lines

Heatmap

Pie

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.

require('echarts'); require('echarts-extension-gmap');

Or use a CDN

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

unpkg

<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);