JSPM – map-map-map@1.4.3

Package Exports

map-map-map
map-map-map/dist/echarts-extension-gmap.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (map-map-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Google Map extension for Apache ECharts

中文说明

Online example on CodePen

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

Examples

Refer to examples/index.html

Preview

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: false

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