npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

echarts-extension-gmap

v1.7.0

Published

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

Downloads

7,107

Readme

NPM version Build Status NPM Downloads jsDelivr Downloads License

Apache ECharts 谷歌地图扩展

README_EN

在线示例 (示例中使用了谷歌地图API,国内访问需要代理)

Apache ECharts 谷歌地图扩展,可以在谷歌地图上展现 点图线图热力图饼图 等可视化。

示例

Scatter 散点图

Lines 线图

Heatmap 热力图

Pie 饼图

示例

安装

npm install echarts-extension-gmap --save

引入

可以直接引入打包好的扩展文件和谷歌地图的 Javascript API

<!-- 引入谷歌地图的Javascript API,这里需要使用你在谷歌地图开发者平台申请的key -->
<script src="https://maps.googleapis.com/maps/api/js?key={key}"></script>
<!-- 引入 ECharts -->
<script src="/path/to/echarts.min.js"></script>
<!-- 引入谷歌地图扩展 -->
<script src="dist/echarts-extension-gmap.min.js"></script>

如果 webpack 等工具打包,也可以通过 require 或者 import 引入

// 使用 require
require('echarts');
require('echarts-extension-gmap');

// 使用 import
import * as echarts from 'echarts';
import 'echarts-extension-gmap';

使用 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>

插件会自动注册相应的组件。

使用

扩展主要提供了跟 geo 一样的坐标系和底图的绘制,因此配置方式非常简单,如下

option = {
  // 加载 gmap 组件
  gmap: {
    // 地图中心 支持数组或JSON对象
    //center: [108.39, 39.9],
    center: { lng: 108.39, lat: 39.9 },
    // 缩放级别
    zoom: 4,
    // 其他地图初始化参数...
    // https://developers.google.cn/maps/documentation/javascript/reference/map#MapOptions

    // 移动过程中实时渲染。默认为 true。如数据量较大,建议置为 false。
    renderOnMoving: true,
    // 谷歌地图 ECharts 图层的 zIndex。默认为 2000。
    echartsLayerZIndex: 2019,
    // 是否启用手势事件处理,如拖拽等。默认为 true。
    // 此配置项从 v1.4.0 起支持
    roam: true
  },
  series: [
    {
      type: 'scatter',
      // 使用谷歌地图坐标系
      coordinateSystem: 'gmap',
      // 数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]
      data: [[120, 30, 8], [120.1, 30.2, 20]],
      encode: {
        value: 2,
        lng: 0,
        lat: 1
      }
    }
  ]
};

// 获取谷歌地图实例
var gmap = chart
  .getModel()
  .getComponent('gmap')
  .getGoogleMap();
// 添加一个Marker
var marker = new google.maps.Marker({ position: gmap.getCenter() });
marker.setMap(gmap);
// 添加交通图层
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(gmap);