docs: update readme

README.md

@@ -11,7 +11,9 @@
 
 Screenshot of common charts, the left part is light theme, the right part is grafana theme.
 
-![go-charts](./assets/go-charts.png)
+<p align="center">
+    <img src="./assets/go-charts.png" alt="go-charts">
+</p>
 
 ## 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