docs: update readme
This commit is contained in:
vicanso
parent
edc01d3b37
commit
78ba3017ae
2 changed files with 72 additions and 11 deletions
61
README.md
61
README.md
|
|
@ -11,7 +11,9 @@
|
|||
|
||||
Screenshot of common charts, the left part is light theme, the right part is grafana theme.
|
||||
|
||||
|
||||
<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
|
||||
|
|
|
|||
22
README_zh.md
22
README_zh.md
|
|
@ -8,7 +8,9 @@
|
|||
`Apache ECharts`在前端开发中得到众多开发者的认可，因此`go-charts`提供了兼容`Apache ECharts`的配置参数，简单快捷的生成相似的图表(`svg`或`png`)，方便插入至Email或分享使用。下面为常用的图表截图(主题为light与grafana)：
|
||||
|
||||
|
||||
|
||||
<p align="center">
|
||||
<img src="./assets/go-charts.png" alt="go-charts">
|
||||
</p>
|
||||
|
||||
## 支持图表类型
|
||||
|
||||
|
|
@ -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]` 嵌套的子图表参数列表，图表支持嵌套的形式=
|
||||
|
||||
## 性能
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue