Document Editing Guidelines

Adding a Markdown File

Add a markdown file to the contents/zh/ (Chinese posts) or contents/en/ (English posts) directories, up to three levels. Update the path and title information in contents/zh/posts.yml or contents/en/posts.yml.

Lowercase markdown file names.

Using Prettier to Automatically Format Code

Before you start, we recommend installing the prettier VSCode plugin, which will automatically format the code for you when you save it.

If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent prettier from formatting the code inside the block

<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->

If you find blocks of code that are not formatted, check first for syntax errors in the code.

Built-in Variables

optionPath
mainSitePath
exampleViewPath
exampleEditorPath
lang

Usage:

${xxxxx}

Link to Other Articles

[Get Apache ECharts](${lang}/basics/download)

Get Apache ECharts

Embedding Code

Basic Usage

```js
option = {
    series: [{
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
    }]
};
\```

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

Recommended Way of Writing Code

In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.

For example, the comment ...

option = {
  series: [
    {
      type: 'bar'
      // ...
    }
  ]
};

Live Preview and Editing

Currently only preview of Option code is supported

\```js live
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

live

More Preview Layouts

Left to Right

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'lr'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'lr'}" />

#### Right to left

<!-- prettier-ignore-start -->

markdown

option = {
  ...
};
\```option = {
  ...
};
\```

live

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

live

Down to Up

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'bt'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'bt'}" />

### Highlighting Lines of Code and Adding Filenames

Use.

<!-- prettier-ignore-start -->

markdown

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```

Effects.

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

Embedding Images

Source images are stored under static/images/.

![image description](images/demo.png)

Set the Image Height and Width

For the temporary style of the current page, you can just write html.

<img data-src="images/demo.png" style="width: 50px" />

Add Example Iframe

src is the string after ?c= in the https://echarts.apache.org/examples/en/editor.html?c=line-simple address

Use:

<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>

Result:

Add Link to Option Item

Use:

<md-option link="series-bar.itemStyle.color"></md-option>

Result: series-bar.itemStyle.color

More Component Usage

The documentation supports the use of globally registered markdown components. In addition to the md-example component just described, the following components are also available

md-alert

Prompt components

<md-alert type="info">
This is an info alert.
</md-alert>

This is an info alert.

<md-alert type="success">
This is a success alert.
</md-alert>

This is a success alert.

<md-alert type="warning">
This is a warning alert.
</md-alert>

This is a warning alert.

<md-alert type="danger">
This is a danger alert.
</md-alert>

This is a danger alert.

Contributors Edit this page on GitHub

pissang

plainheart