Echarts图形图表

# Echarts图形图表

---

MrDoc觅道文档支持 在 Markdown 编辑器中插入 Echarts 图表图形，然后在文档页面中显示。

## 语法

1.  ` ```echart`
2.  `echart的配置选项`
3.  ` ``` `

你还可以直接点击工具栏中的 快速在文档中生成 echarts 代码块。

![](/media//202005/2020-05-29_083502.png "null")

## 示例

1.  ` ```echart`
2.  `{`
3.   `xAxis: {`
4.   `type: 'category',`
5.   `data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']`
6.   `},`
7.   `yAxis: {`
8.   `type: 'value'`
9.   `},`
10.   `series: [{`
11.   `data: [820, 932, 901, 934, 1290, 1330, 1320],`
12.   `type: 'line'`
13.   `}]`
14.   `}`
15.  ` ``` `

上述代码 将会显示如下所示的 Echart 图形：

03006009001,2001,500MonTueWedThuFriSatSun

## 图表配置项

具体的 Echarts 配置项可以参考 [Echart官方实例](https://echarts.apache.org/examples/zh/index.html)。

例如，在 Echarts 的官方实例中，其一个图形的基本配置项如下图所示：

![](/media//202005/2020-05-24_101437.png "null")

我们需要的配置项内容为`{}`及其之间的内容：

1.  `{`
2.   `xAxis:  {`
3.   `type:  'category',`
4.   `data:  ['Mon',  'Tue',  'Wed',  'Thu',  'Fri',  'Sat',  'Sun']`
5.   `},`
6.   `yAxis:  {`
7.   `type:  'value'`
8.   `},`
9.   `series:  [{`
10.   `data:  [820,  932,  901,  934,  1290,  1330,  1320],`
11.   `type:  'line'`
12.   `}]`
13.  `}`

切记两点：

1.  务必按照 Echarts 官方实例的配置项文件进行修改。
2.  配置项末尾一定不要包含`;`分号。

---