diff --git a/README.md b/README.md
index ce52559..6710cdd 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,9 @@
Screenshot of common charts, the left part is light theme, the right part is grafana theme.
-
+
+
+
## Chart Type
@@ -115,8 +117,65 @@ func main() {
}
```
+## ECharts Option
+
+The name with `[]` is new parameter, others are the same as `echarts`.
+
+- `[type]` The canvas type, support `svg` and `png`, default is `svg`
+- `[theme]` The theme, support `dark`, `light` and `grafana`, default is `light`
+- `[fontFamily]` The font family for chart
+- `[padding]` The padding of chart
+- `[box]` The canvas box of chart
+- `[width]` The width of chart
+- `[height]` The height of chart
+- `title` Title component, including main title and subtitle
+ - `title.text` The main title text, supporting for \n for newlines
+ - `title.subtext`Subtitle text, supporting for \n for newlines
+ - `title.left` Distance between title component and the left side of the container. Left value can be instant pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.
+ - `title.top` Distance between title component and the top side of the container. Top value can be instant pixel value like 20
+ - `title.textStyle.color` Text color for title
+ - `title.textStyle.fontSize` Text font size for title
+ - `title.textStyle.fontFamily` Text font family for title, it will change the font family for chart
+- `xAxis` The x axis in cartesian(rectangular) coordinate. `go-charts` only support one x axis.
+ - `xAxis.boundaryGap` The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different. If set `null` or `true`, the label appear in the center part of two axis ticks.
+ - `xAxis.splitNumber` Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability
+ - `xAxis.data` Category data, only support string array.
+- `yAxis` The y axis in cartesian(rectangular) coordinate, it support 2 y axis
+ - `yAxis.min` The minimum value of axis. It will be automatically computed to make sure axis tick is equally distributed when not set
+ - `yAxis.max` The maximum value of axis. It will be automatically computed to make sure axis tick is equally distributed when not se.
+ - `yAxis.axisLabel.formatter` Formatter of axis label, which supports string template: `"formatter": "{value} kg"`
+ - `yAxis.axisLine.lineStyle.color` The color for line
+- `legend` Legend component
+ - `legend.show` Whether to show legend
+ - `legend.data` Data array of legend, only support string array: ["Email", "Video Ads"]
+ - `legend.align` Legend marker and text aligning. Support `left` and `right`, default is `left`
+ - `legend.padding` legend space around content
+ - `legend.left` Distance between legend component and the left side of the container. Left value can be instant pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.
+ - `legend.top` Distance between legend component and the top side of the container. Top value can be instant pixel value like 20
+- `series` The series for chart
+ - `series.name` Series name used for displaying in legend.
+ - `series.type` Series type: `line`, `bar` or`pie`
+ - `series.radius` Radius of Pie chart:`50%`, default is `40%`
+ - `series.yAxisIndex` Index of y axis to combine with, which is useful for multiple y axes in one chart
+ - `series.label.show` Whether to show label
+ - `series.label.distance` Distance to the host graphic element
+ - `series.label.color` Label color
+ - `series.itemStyle.color` Color for the series's item
+ - `series.markPoint` Mark point in a chart.
+ - `series.markPoint.symbolSize` Symbol size, default is `30`
+ - `series.markPoint.data` Data array for mark points, each of which is an object and the type only support `max` and `min`: `[{"type": "max"}, {"type": "min"}]`
+ - `series.markLine` Mark line in a chart
+ - `series.markPoint.data` Data array for mark points, each of which is an object and the type only support `max`, `min` and `average`: `[{"type": "max"}, {"type": "min"}, {"type": "average"}]``
+ - `series.data` Data array of series, which can be in the following forms:
+ - `value` It's a float array: [1.1, 2,3, 5.2]
+ - `object` It's a object value array: [{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]
+- `[children]` The options of children chart
+
+
## Performance
+Generate a png chart will be less than 20ms. It's better than using `chrome headless` with `echarts`.
+
```bash
BenchmarkMultiChartPNGRender-8 78 15216336 ns/op 2298308 B/op 1148 allocs/op
BenchmarkMultiChartSVGRender-8 367 3356325 ns/op 20597282 B/op 3088 allocs/op
diff --git a/README_zh.md b/README_zh.md
index 15c1c9f..f4f5d4a 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -8,7 +8,9 @@
`Apache ECharts`在前端开发中得到众多开发者的认可,因此`go-charts`提供了兼容`Apache ECharts`的配置参数,简单快捷的生成相似的图表(`svg`或`png`),方便插入至Email或分享使用。下面为常用的图表截图(主题为light与grafana):
-
+
+
+
## 支持图表类型
@@ -117,18 +119,18 @@ func main() {
## ECharts参数说明
-标记为[非echarts配置]的参数为新增参数,可根据实际使用场景添加。
+名称有[]的参数非echarts的原有参数,为`go-charts`的新增参数,可根据实际使用场景添加。
-- `type` 画布类型,支持`svg`与`png`,默认为`svg`
-- `theme` 颜色主题,支持`dark`、`light`以及`grafana`模式,默认为`light`
-- `fontFamily` 字体,全局的字体设置[非echarts配置]
-- `padding` 图表的内边距,单位px。支持以下几种模式的设置[非echarts配置]
+- `[type]` 画布类型,支持`svg`与`png`,默认为`svg`
+- `[theme]` 颜色主题,支持`dark`、`light`以及`grafana`模式,默认为`light`
+- `[fontFamily]` 字体,全局的字体设置
+- `[padding]` 图表的内边距,单位px。支持以下几种模式的设置
- `padding: 5` 设置内边距为5
- `padding: [5, 10]` 设置上下的内边距为 5,左右的内边距为 10
- `padding:[5, 10, 5, 10]` 分别设置`上右下左`边距
-- `box` 图表的区域,以{"left": Int, "right": Int, "top": Int, "bottom": Int}的形式配置,[非echarts配置]
-- `width` 画布宽度,默认为600[非echarts配置]
-- `height` 画布高度,默认为400[非echarts配置]
+- `[box]` 图表的区域,以{"left": Int, "right": Int, "top": Int, "bottom": Int}的形式配置
+- `[width]` 画布宽度,默认为600
+- `[height]` 画布高度,默认为400
- `title` 图表标题,包括标题内容、高度、颜色等
- `title.text` 标题文本,支持以`\n`的形式换行
- `title.subtext` 副标题文本,支持以`\n`的形式换行
@@ -170,7 +172,7 @@ func main() {
- `series.data` 数据项对应的数据数组,支持以下形式的数据:
- `数值` 常用形式,数组数据为浮点数组,如[1.1, 2,3, 5.2]
- `结构体` pie图表或bar图表中指定样式使用,如[{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]
-- `children` 嵌套的子图表参数列表,图表支持嵌套的形式非echarts配置]
+- `[children]` 嵌套的子图表参数列表,图表支持嵌套的形式=
## 性能