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. -![go-charts](./assets/go-charts.png) +

+ go-charts +

## 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): -![go-charts](./assets/go-charts.png) +

+ go-charts +

## 支持图表类型 @@ -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]` 嵌套的子图表参数列表,图表支持嵌套的形式= ## 性能