https://github.com/chfw/echarts-scrappeteer

Puppeteer! Scrape all echarts in this web page please!
https://github.com/chfw/echarts-scrappeteer

Last synced: 18 days ago
JSON representation

Puppeteer! Scrape all echarts in this web page please!

• Host: GitHub
• URL: https://github.com/chfw/echarts-scrappeteer
• Owner: chfw
• Created: 2017-09-04T07:58:36.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-09T21:19:19.000Z (over 7 years ago)
• Last Synced: 2025-04-13T11:50:20.955Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.43 MB
• Stars: 47
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-echarts - echarts-scrappeteer - Puppeteer! Scrape all Apache ECharts from this web page please! (Languages / Node.js)

README

        
# Echarts Scraper Puppeteer

[![Build Status](https://travis-ci.org/chfw/echarts-scrappeteer.svg?branch=master)](https://travis-ci.org/chfw/echarts-scrappeteer) [![codecov](https://codecov.io/gh/chfw/echarts-scrappeteer/branch/master/graph/badge.svg)](https://codecov.io/gh/chfw/echarts-scrappeteer) [![npm version](https://badge.fury.io/js/echarts-scrappeteer.svg)](https://badge.fury.io/js/echarts-scrappeteer)

For svg output, it is required that **echarts 3.8+** is used and the echarts instance

is [renderred as svg](https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG).

## Introduction

It scrapes all echarts found in a web page as images. And it scrapes 3D charts too. Of course, it supports

[pyecharts](https://github.com/chenjiandongx/pyecharts) as well. Please find the example in later section.

![demo](https://github.com/chfw/echarts-scrappeteer/raw/master/demo.gif)

## Installation

```shell

$ npm i -g echarts-scrappeteer

```

### requirements

Node 7.6.0 or later

## Usage

```shell

Usage: scrappeteer [options] 

Options:

  -f, --format          image format

  -o, --output                output file name

  -w, --wait      wait a while before scrapping

  -v, --viewPort            force puppeteer to set viewport. for echarts gallery site only

  -r, --clipRectangle   record rectangle when making gif animation

  -c, --frameCounts               of frames. gif only

  -i, --frameInterval             frame intervals. gif only

  -s, --skipFrames                skip initial frames. gif only

  -g, --gap time                  between each gif snapshot. gif only

  -h, --help                              output usage information

```

If the page load speed is slow or if the resulting image is partial, `-w` parameter is

required to delay the scrape action.

Please note that if more than one echarts should be found in a page, `-f` option applies to all.

## Example

### Scrape echarts from a URL

Here is the command for your discretion:

```

$ scrappeteer https://pyecharts.github.io/echarts-china-cities-js/preview.html

```

### Scrape echarts from a local file

```shell

$ scrappeteer render.html

```

Where does the `render.html` come from? It is genereted by pyecharts. Please visit [pyecharts-demo.py](https://github.com/chfw/echarts-scrappeteer/blob/master/pyecharts-demo/pyecharts-demo.py). 

![scrape pyecharts](https://github.com/chfw/echarts-scrappeteer/raw/master/scraped-gallery/output.4.png)

## Gallery

### Gif format :fire:

```shell

scrappeteer http://gallery.echartsjs.com/editor.html?c=xrkJtnKJq- -w 2000 -f gif -r 525,50,770,750 -o gf3 -i 300 -c 10 -v 1300,800

```

[![high speed route](https://github.com/chfw/echarts-scrappeteer/raw/master/scraped-gallery/shenzhen.gif)](http://gallery.echartsjs.com/editor.html?c=xrkJtnKJq-)

### Static images

[![step count](https://github.com/chfw/echarts-scrappeteer/raw/master/scraped-gallery/step-count.png)](http://gallery.echartsjs.com/editor.html?c=calendar-effectScatter)

[![pig plan](https://github.com/chfw/echarts-scrappeteer/raw/master/scraped-gallery/pig-plan.png)](http://gallery.echartsjs.com/editor.html?c=xByUX8HuDZ)

[![surface wave](https://github.com/chfw/echarts-scrappeteer/raw/master/scraped-gallery/surface-wave.png)](http://gallery.echartsjs.com/editor.html?c=xHkcYXm9pe)

## LICENSE

ISC