Echarts图形图表

# Echarts图形图表

---

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

## 语法

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

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

![](/media//202102/2021-02-10_042748.png)

## 示例
```coffeescript
```echart
{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
    }
```

上述代码 将会显示如下所示的 Echart 图形：
```echart
{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
    }
```

## 图表配置项

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

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

![](/media//202102/2021-02-10_042828.png)

我们需要的配置项内容为`{}`及其之间的内容：
```json
{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
}
```

### 切记两点：

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

---