Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

echarts-extension-gmap

Package Overview
Dependencies
0
Maintainers
1
Versions
12
Issues
File Explorer

Advanced tools

echarts-extension-gmap

A Google Map(https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)

    1.5.0latest
    Github

Version published
Maintainers
1
Weekly downloads
488
decreased by-23.39%

Weekly downloads

Changelog

Source

v1.5.0

Readme

Source

NPM version Build Status NPM Downloads jsDelivr Downloads License

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

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

Keywords

FAQs

Last updated on 20 Nov 2022

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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc