zeni/go-charts
1
0
Fork 0
Code Issues Pull requests Projects Releases 47 Packages Wiki Activity Actions

docs: update readme

Browse source
This commit is contained in:
vicanso 2022-02-19 13:55:39 +08:00
parent edc01d3b37
commit 78ba3017ae
2 changed files with 72 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

61
README.md
View file

@ -11,7 +11,9 @@
Screenshot of common charts, the left part is light theme, the right part is grafana theme. 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 ## 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 ## Performance
Generate a png chart will be less than 20ms. It's better than using `chrome headless` with `echarts`.
```bash ```bash
BenchmarkMultiChartPNGRender-8 78 15216336 ns/op 2298308 B/op 1148 allocs/op BenchmarkMultiChartPNGRender-8 78 15216336 ns/op 2298308 B/op 1148 allocs/op
BenchmarkMultiChartSVGRender-8 367 3356325 ns/op 20597282 B/op 3088 allocs/op BenchmarkMultiChartSVGRender-8 367 3356325 ns/op 20597282 B/op 3088 allocs/op

22
README_zh.md
View file

@ -8,7 +8,9 @@
`Apache ECharts`在前端开发中得到众多开发者的认可，因此`go-charts`提供了兼容`Apache ECharts`的配置参数，简单快捷的生成相似的图表(`svg`或`png`)，方便插入至Email或分享使用。下面为常用的图表截图(主题为light与grafana)： `Apache ECharts`在前端开发中得到众多开发者的认可，因此`go-charts`提供了兼容`Apache ECharts`的配置参数，简单快捷的生成相似的图表(`svg`或`png`)，方便插入至Email或分享使用。下面为常用的图表截图(主题为light与grafana)：
![go-charts](./assets/go-charts.png) <p align="center">
<img src="./assets/go-charts.png" alt="go-charts">
</p>
## 支持图表类型 ## 支持图表类型
@ -117,18 +119,18 @@ func main() {
## ECharts参数说明 ## ECharts参数说明
标记为[非echarts配置]的参数为新增参数，可根据实际使用场景添加。 名称有[]的参数非echarts的原有参数，为`go-charts`的新增参数，可根据实际使用场景添加。
- `type` 画布类型，支持`svg`与`png`，默认为`svg` - `[type]` 画布类型，支持`svg`与`png`，默认为`svg`
- `theme` 颜色主题，支持`dark`、`light`以及`grafana`模式，默认为`light` - `[theme]` 颜色主题，支持`dark`、`light`以及`grafana`模式，默认为`light`
- `fontFamily` 字体，全局的字体设置[非echarts配置] - `[fontFamily]` 字体，全局的字体设置
- `padding` 图表的内边距，单位px。支持以下几种模式的设置[非echarts配置] - `[padding]` 图表的内边距，单位px。支持以下几种模式的设置
- `padding: 5` 设置内边距为5 - `padding: 5` 设置内边距为5
- `padding: [5, 10]` 设置上下的内边距为 5，左右的内边距为 10 - `padding: [5, 10]` 设置上下的内边距为 5，左右的内边距为 10
- `padding:[5, 10, 5, 10]` 分别设置`上右下左`边距 - `padding:[5, 10, 5, 10]` 分别设置`上右下左`边距
- `box` 图表的区域，以{"left": Int, "right": Int, "top": Int, "bottom": Int}的形式配置，[非echarts配置] - `[box]` 图表的区域，以{"left": Int, "right": Int, "top": Int, "bottom": Int}的形式配置
- `width` 画布宽度，默认为600[非echarts配置] - `[width]` 画布宽度，默认为600
- `height` 画布高度，默认为400[非echarts配置] - `[height]` 画布高度，默认为400
- `title` 图表标题，包括标题内容、高度、颜色等 - `title` 图表标题，包括标题内容、高度、颜色等
- `title.text` 标题文本，支持以`\n`的形式换行 - `title.text` 标题文本，支持以`\n`的形式换行
- `title.subtext` 副标题文本，支持以`\n`的形式换行 - `title.subtext` 副标题文本，支持以`\n`的形式换行
@ -170,7 +172,7 @@ func main() {
- `series.data` 数据项对应的数据数组，支持以下形式的数据： - `series.data` 数据项对应的数据数组，支持以下形式的数据：
- `数值` 常用形式，数组数据为浮点数组，如[1.1, 2,3, 5.2] - `数值` 常用形式，数组数据为浮点数组，如[1.1, 2,3, 5.2]
- `结构体` pie图表或bar图表中指定样式使用，如[{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}] - `结构体` pie图表或bar图表中指定样式使用，如[{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]
- `children` 嵌套的子图表参数列表，图表支持嵌套的形式非echarts配置] - `[children]` 嵌套的子图表参数列表，图表支持嵌套的形式=
## 性能 ## 性能