gitbook-plugin-echarts

gitbook-plugin-echarts

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

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

• midnightSuyama/gitbook-plugin-flowchart.
• midnightSuyama/gitbook-plugin-sequence-diagrams.
• massanek/gitbook-plugin-js-sequence-diagram.
• nsdont/gitbook-plugin-new-flowchart.
• lyhcode/gitbook-plugin-plantuml.

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