gitbook-plugin-echarts

1.0.6 • Public • Published

gitbook-plugin-echarts

Build Status Coverage Status NPM Version NPM Downloads

echarts plugin for Honkit and GitBook.

Installation

npm install gitbook-plugin-echarts

Add this plugin into book.json.

{
  "plugins": ["echarts"]
}

Features

  • Support HTML, PDF, EPUB output(make sure your gitbook support SVG)
  • Support ```chart code block quote
  • Multi code style support

Beautiful Chat

Bar chat Pie chat

Configuration

book.json add the echarts options

"pluginsConfig": {
  "chart": {

  }
}

Usage

To include a echarts diagram, just wrap your definition in a "chart" code block. For example:

```chart
{
    "title": {
        "text": "Fruits number"
    },
    "tooltip": {},
    "legend": {
        "data":["Number"]
    },
    "xAxis": {
        "data": ["Apple","Banana","Peach","Pear","Grape","Kiwi"]
    },
    "yAxis": {},
    "series": [{
        "name": "Number",
        "type": "bar",
        "data": [5, 20, 36, 10, 10, 20]
    }]
}
```

Also you can put in your book block as

{% chart %}
{
    "title": {
        "text": "Fruits number"
    },
    "tooltip": {},
    "legend": {
        "data":["Number"]
    },
    "xAxis": {
        "data": ["Apple","Banana","Peach","Pear","Grape","Kiwi"]
    },
    "yAxis": {},
    "series": [{
        "name": "Number",
        "type": "bar",
        "data": [5, 20, 36, 10, 10, 20]
    }]
}
{% endechart %}

Extend the width

Code mode:

```chart
{
    "width": "900px",
    "height": "500px",
    "title": {
        "text": "Fruits number"
    },
    "tooltip": {},
    "legend": {
        "data":["Number"]
    },
    "xAxis": {
        "data": ["Apple","Banana","Peach","Pear","Grape","Kiwi"]
    },
    "yAxis": {},
    "series": [{
        "name": "Number",
        "type": "bar",
        "data": [5, 20, 36, 10, 10, 20]
    }]
}
```

Template mode:

{% chart width="800px" height="800px" %}

If use both configure method, the code configure will overwrite the template configure.

Learn echarts

echarts

Thanks

See also

These plugins are also available on honkit.

Plugin Description
gitbook-plugin-uml A plug-in that use plantuml to draw beautiful pictures
gitbook-plugin-wavedrom A plug-in that can draw waveforms and register tables
gitbook-plugin-sequence A plug-in that can draw sequence diagrams
gitbook-plugin-flow A plug-in that can draw flowchart.js diagrams
gitbook-plugin-echarts A plug-in that can draw various charts such as bar/pie

Dependencies (2)

Dev Dependencies (6)

Package Sidebar

Install

npm i gitbook-plugin-echarts

Weekly Downloads

21

Version

1.0.6

License

MIT

Unpacked Size

1.25 MB

Total Files

39

Last publish

Collaborators

  • vowstar