文档编辑指南

添加 Markdown 文件

将 markdown 文件添加到 contents/en/（中文文档）或 contents/en/（英文文档）目录中，最多支持三级目录。并在 contents/en/posts.yml 或 contents/en/posts.yml 中更新路径和标题信息。

markdown 文件名请使用小写。

使用 Prettier 自动格式化代码

在开始之前，我们建议安装 Prettier VSCode 插件，它将在您保存时自动为您格式化代码。

如果您觉得自动格式化破坏了您的代码块，可以添加以下注释来阻止 prettier 格式化该代码块内的代码：

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

如果您发现代码块没有被格式化，请首先检查代码中是否存在语法错误。

内置变量

  • optionPath
  • mainSitePath
  • exampleViewPath
  • exampleEditorPath
  • lang

用法

${xxxxx}

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

获取 Apache ECharts

嵌入代码

基本用法

```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]
    }
  ]
};

为了让工具能够帮助我们格式化代码，我们应该尽量避免使用有语法问题的写法。

例如，注释 ...

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

实时预览和编辑

目前只支持 Option 代码的预览。

\```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]
    }
  ]
};
在线示例

更多预览布局

左右布局

<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 = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
在线示例

上下布局

<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]
    }
  ]
};
\```

效果：

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

嵌入图片

源图片存储在 static/images/ 目录下。

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

设置图片高度和宽度

对于当前页面的临时样式，可以直接编写 HTML。

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

添加示例 Iframe

src 是 https://echarts.apache.org/examples/en/editor.html?c=line-simple 地址中 ?c= 之后的字符串。

使用

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

结果

使用

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

结果：series-bar.itemStyle.color

更多组件用法

本文档支持使用全局注册的 markdown 组件。除了刚才介绍的 md-example 组件外，还有以下组件可用：

md-alert

提示组件

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

这是一条信息提示。

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

这是一条成功提示。

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

这是一条警告提示。

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

这是一条危险提示。

贡献者 在 GitHub 上编辑此页

pissangplainheart