# mapbox-echarts

> mapbox component of echarts

Latest version **1.0.3** (published 2018-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install mapbox-echarts
pnpm add mapbox-echarts
yarn add mapbox-echarts
bun add mapbox-echarts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-10-23 |
| First published | 2018-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18 |
| Author | wanglongfei |
| Maintainers | wlfei0502 |
| Keywords | mapbox, echarts |

## Links

- npm: https://www.npmjs.com/package/mapbox-echarts
- Repository: https://github.com/wlfei0502/mapbox-echarts
- Homepage: https://github.com/wlfei0502/mapbox-echarts#readme
- Issues: https://github.com/wlfei0502/mapbox-echarts/issues
- npm.io page: https://npm.io/package/mapbox-echarts

## Dependencies (2)

- [echarts](https://npm.io/package/echarts.md) ^4.2.0-rc.1
- [mapbox-gl](https://npm.io/package/mapbox-gl.md) ^0.50.0-beta.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-10-23
- 1.0.2 — 2018-10-15
- 1.0.1 — 2018-10-15
- 1.0.0 — 2018-10-12

## README

# Demo
[热力图](https://wlfei0502.github.io/mapbox-echarts/example/heatmap.html)<br/>
[散点图](https://wlfei0502.github.io/mapbox-echarts/example/scatter.html)

# mapbox-echarts

ECharts extension for visualizing data on mapbox. Require mapbox-gl and echarts.

# How to install

## with script tag
```
<script type="text/javascript" src="mapbox-gl.js">
<script type="text/javascript" src="echarts.js">
<script type="text/javascript" src="mapbox-echarts.js">
    
```
      
## with npm
```
npm install mapbox-gl echarts mapbox-echarts

import 'mapbox-gl'
import echarts from 'echarts'
import 'mapbox-echarts'

```

# Usage
use 'tmap' as Echarts coordinateSystem

```
var style =  {
  "version": 8,
  "sprite": "http://localhost:8080/static/sprite/sprite",
  "glyphs": "mapbox://font/{fontstack}/{range}.pbf",
  "sources": {
    "osm-tiles": {
      "type": "raster",
      'tiles': [
        "http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}"
      ],
      'tileSize': 256
    }
  },
  "layers": [{
    "id": "tdt-tiles",
    "type": "raster",
    "source": "osm-tiles",
    "minzoom": 0,
    "maxzoom": 20
  }]
}

var myChart = echarts.init(document.getElementById('echarts-container'));
var option = {
  // map option
  tmap:{
    center: [120.13066322374, 30.240018034923],
    zoom: 2,
    roam: true,
    style: style,
    transformRequest: (url, resourceType)=> {
      if(resourceType === 'Tile' && url.indexOf('DataServer') > -1) {
        var random = parseInt(Math.random()*7);
        return {
          url: url.replace('{s}', random)
        }
      }
    }
  },
  series:[{
    coordinateSystem:'tmap'
  }]
}

myechart.setOption(option)
```

---
_Source: https://npm.io/package/mapbox-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._