Skip to content

echarts honkit/gitbook plug-in that can draw various charts such as bar/pie

Notifications You must be signed in to change notification settings

vowstar/gitbook-plugin-echarts

Repository files navigation

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

About

echarts honkit/gitbook plug-in that can draw various charts such as bar/pie

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published