Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maptalks/maptalks.e3
The plugin to integerate Echarts3 as a layer with maptalks.js
https://github.com/maptalks/maptalks.e3
Last synced: about 2 months ago
JSON representation
The plugin to integerate Echarts3 as a layer with maptalks.js
- Host: GitHub
- URL: https://github.com/maptalks/maptalks.e3
- Owner: maptalks
- License: mit
- Created: 2017-01-20T08:45:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-04T08:39:02.000Z (over 1 year ago)
- Last Synced: 2024-07-13T00:49:17.775Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 299 KB
- Stars: 45
- Watchers: 4
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - maptalks.e3 - A plugin to integrate Apache ECharts 3 as a layer with [maptalks.js](https://github.com/maptalks/maptalks.js). (Extensions / Videos)
README
# maptalks.e3
[](https://circleci.com/gh/maptalks/maptalks.e3)
[](https://github.com/maptalks/maptalks.e3)
A maptalks Layer to render with great [echarts 3](https://github.com/ecomfe/echarts) library.
## Examples
* [Airlines](https://maptalks.github.io/maptalks.e3/demo/fly.html). (based on [original](http://echarts.baidu.com/demo.html#geo-lines))
* [Bus lines in beijing](https://maptalks.github.io/maptalks.e3/demo/bus.html). (based on [original](http://echarts.baidu.com/demo.html#lines-bmap-effect))
## Install
* Install with npm: ```npm install maptalks.e3```.
* Download from [dist directory](https://github.com/maptalks/maptalks.e3/tree/gh-pages/dist).
* Use unpkg CDN: ```https://unpkg.com/maptalks.e3/dist/maptalks.e3.min.js```
## Usage
As a plugin, ```maptalks.e3``` must be loaded after ```maptalks.js``` in browsers.
```html
// ecOptions is echarts' options
var e3Layer = new maptalks.E3Layer('e3', ecOptions)
.addTo(map);
```
## Supported Browsers
IE 9-11, Chrome, Firefox, other modern and mobile browsers.
## API Reference
```E3Layer``` is a subclass of [maptalks.Layer](https://maptalks.github.io/maptalks.js/api/0.x/Layer.html) and inherits all the methods of its parent.
### `Constructor`
```javascript
new maptalks.E3Layer(id, ecOptions, options)
```
* id **String** layer id
* ecOptions **Object** [echarts options](http://echarts.baidu.com/echarts2/doc/doc-en.html)
* options **Object** options
* renderer **String** renderer of the layer, only 'dom' is supported now. ('dom' by default)
* container **String** specify the container for layer dom elements: 'front' or 'back' ('front' by default)
* hideOnZooming **Boolean** whether hide e3layer on zooming, to improve zooming performance.
* hideOnMoving **Boolean** whether hide e3layer on moving, to improve moving performance.
* hideOnRotating **Boolean** whether hide e3layer on drag rotating, to improve drag rotating performance.
* Other options defined in [maptalks.Layer](https://maptalks.github.io/maptalks.js/api/0.x/Layer.html)
### `getEChartsOption()`
get layer's echarts options
**Returns** `Object`
### `setEChartsOption(ecOptions)`
set a new echarts option to the layer
* ecOptions **Object** echarts options
**Returns** `this`
### `getEChartsInstance()`
get layer's echarts instance
**Returns** `Object`
### `toJSON()`
export the E3Layer's JSON.
```javascript
var json = e3layer.toJSON();
```
**Returns** `Object`
## Contributing
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
## Develop
The only source file is ```index.js```.
It is written in ES6, transpiled by [babel](https://babeljs.io/) and tested with [mocha](https://mochajs.org) and [expect.js](https://github.com/Automattic/expect.js).
### Scripts
* Install dependencies
```shell
$ npm install
```
* Watch source changes and generate runnable bundle repeatedly
```shell
$ gulp watch
```
* Tests
```shell
$ npm test
```
* Watch source changes and run tests repeatedly
```shell
$ gulp tdd
```
* Package and generate minified bundles to dist directory
```shell
$ gulp minify
```
* Lint
```shell
$ npm run lint
```