From 0a60f76c8753864373a86cf35eb969d8112af4eb Mon Sep 17 00:00:00 2001
From: monitor1394 <monitor1394@gmail.com>
Date: Fri, 27 Sep 2019 09:27:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0XCharts=E9=97=AE=E7=AD=94?=
 =?UTF-8?q?=E3=80=81XChartsAPI=E6=8E=A5=E5=8F=A3=E3=80=81XCharts=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9=E6=89=8B=E5=86=8C=E7=AD=89=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Doc/XChartsAPI.md             |  89 ++++++++
 Doc/XCharts配置项手册.md      | 400 ++++++++++++++++++++++++++++++++++
 Doc/XCharts问答.md            |  66 ++++++
 Doc/教程：5分钟上手XCharts.md |  26 +++
 README.md                     |  69 +-----
 5 files changed, 587 insertions(+), 63 deletions(-)
 create mode 100644 Doc/XChartsAPI.md
 create mode 100644 Doc/XCharts配置项手册.md
 create mode 100644 Doc/XCharts问答.md
 create mode 100644 Doc/教程：5分钟上手XCharts.md

diff --git a/Doc/XChartsAPI.md b/Doc/XChartsAPI.md
new file mode 100644
index 00000000..980f1cf2
--- /dev/null
+++ b/Doc/XChartsAPI.md
@@ -0,0 +1,89 @@
+# XCharts API
+
+[返回首页](../Readme.md)  
+[XCharts配置项手册](XCharts配置项手册.md)  
+[XCharts问答](XCharts问答.md)
+
+## `BaseChart`
+
+* `BaseChart.title`：标题组件`Title`。
+* `BaseChart.legend`：图例组件`Legend`。
+* `BaseChart.tooltip`：提示框组件`Tooltip`。
+* `BaseChart.series`：系列列表`Series`。
+* `BaseChart.chartWidth`：图表的宽。
+* `BaseChart.chartHeight`：图表的高。
+* `BaseChart.minShowDataNumber`：图表所显示数据的最小索引。
+* `BaseChart.maxShowDataNumber`：图表所显示数据的最大索引。
+* `BaseChart.maxCacheDataNumber`：图表每个系列中可缓存的最大数据量。默认为0没有限制，大于0时超过指定值会移除旧数据再插入新数据。
+* `BaseChart.lineSmoothStyle`：平滑折线图的平滑系数。
+* `BaseChart.SetSize(float width, float height)`：设置图表的大小。
+* `BaseChart.ClearData()`：清除所有数据，系列列表会保留，只是移除列表中系列的数据。
+* `BaseChart.RemoveData()`：清除所有系列和图例数据，系列列表也会被清除。
+* `BaseChart.RemoveData(string serieName)`：清除指定系列名称的数据。
+* `BaseChart.AddSerie(string serieName, SerieType type, bool show = true)`：添加一个系列到系列列表中。
+* `BaseChart.AddData(string serieName, float data, string dataName = null)`：添加一个数据到指定的系列中。
+* `BaseChart.AddData(int serieIndex, float data, string dataName = null)`：添加一个数据到指定的系列中。
+* `BaseChart.AddData(string serieName, List<float> multidimensionalData, string dataName = null)`：添加多维数据`（x,y,z...）`到指定的系列中。
+* `BaseChart.AddData(int serieIndex, List<float> multidimensionalData, string dataName = null)`：添加多维数据`（x,y,z...）`到指定的系列中。
+* `BaseChart.AddData(string serieName, float xValue, float yValue, string dataName)`：添加`（x,y）`数据到指定系列中。
+* `BaseChart.AddData(int serieIndex, float xValue, float yValue, string dataName = null)`：添加`（x,y）`数据到指定系列中。
+* `BaseChart.UpdateData(string serieName, float value, int dataIndex = 0)`：更新指定系列中的指定索引数据。
+* `BaseChart.UpdateData(int serieIndex, float value, int dataIndex = 0)`：更新指定系列中的指定索引数据。
+* `BaseChart.UpdateDataName(string serieName, string dataName, int dataIndex = 0)`：更新指定系列中的指定索引数据名称。
+* `BaseChart.UpdateDataName(int serieIndex, string dataName, int dataIndex)`：更新指定系列中的指定索引数据名称。
+* `BaseChart.SetActive(string serieName, bool active)`：设置指定系列是否显示。
+* `BaseChart.SetActive(int serieIndex, bool active)`：设置指定系列是否显示。
+* `BaseChart.IsActive(string serieName)`：获取指定系列是否显示。
+* `BaseChart.IsActive(int serieIndex)`：获取指定系列是否显示。
+* `BaseChart.IsActiveByLegend(string legendName)`：获得指定图例名字的系列是否显示。
+* `BaseChart.RefreshChart()`：在下一帧刷新图表。
+* `BaseChart.ReinitChartLabel()`：重新初始化`SerieLabel`。
+* `BaseChart.UpdateTheme(Theme theme)`：切换图表主题。
+* `BaseChart.AnimationEnable(bool flag)`：启用或关闭起始动画。
+* `BaseChart.AnimationStart()`：开始初始动画。
+* `BaseChart.AnimationStop()`：停止初始化动画。
+* `BaseChart.AnimationReset()`：重置初始动画，重新播放。
+
+## `CoordinateChart`
+
+* `CoordinateChart.grid`：网格组件 `Grid`。
+* `CoordinateChart.xAxises`：左右两个 `X` 轴组件 `XAxis`。
+* `CoordinateChart.yAxises`：左右两个 `Y` 轴组件 `YAxis`。
+* `CoordinateChart.dataZoom`：区域缩放组件 `DataZoom`。
+* `CoordinateChart.coordinateX`：坐标系的左下角坐标 `X`。
+* `CoordinateChart.coordinateY`：坐标系的左下角坐标 `Y`。
+* `CoordinateChart.coordinateWid`：坐标系的宽。
+* `CoordinateChart.coordinateHig`：坐标系的高。
+* `CoordinateChart.ClearAxisData()`：清除所有x轴和y轴的类目数据。
+* `CoordinateChart.AddXAxisData(string category, int xAxisIndex = 0)`：添加一个类目数据到指定的 `X` 轴。
+* `CoordinateChart.AddYAxisData(string category, int yAxisIndex = 0)`：添加一个类目数据到指定的 `Y` 轴。
+* `CoordinateChart.IsValue()`：是否是纯数值坐标。
+
+## `LineChart`
+
+* 继承 `BaseChart`。
+* 继承自 `CoordinateChart`。
+
+## `BarChart`
+
+* 继承自 `BaseChart`。
+* 继承自 `CoordinateChart`。
+
+## `PieChart`
+
+* 继承自 `BaseChart`。
+* `pie`：饼图组件 `Pie`。
+
+## `RadarChart`
+
+* 继承自 `BaseChart`。
+* `radars`：雷达组件列表 `Radar`。
+
+## `ScatterChart`
+
+* 继承自 `BaseChart`。
+* 继承自 `CoordinateChart`。
+
+[返回首页](../Readme.md)  
+[XCharts配置项手册](XCharts配置项手册.md)  
+[XCharts问答](XCharts问答.md)
diff --git a/Doc/XCharts配置项手册.md b/Doc/XCharts配置项手册.md
new file mode 100644
index 00000000..c65492e5
--- /dev/null
+++ b/Doc/XCharts配置项手册.md
@@ -0,0 +1,400 @@
+# 配置项手册
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts问答](XCharts问答.md)
+
+## `Theme`
+
+---
+主题组件。主题用来配置图表的全局配色等其他参数。
+
+相关参数：
+
+* `theme`：内置主题类型。有`Default`、`Light`、`Dark`三种可选内置主题。
+* `font`：所有文字的通用字体。
+* `backgroundColor`：图表背景颜色。
+* `titleTextColor`：主题的主标题文字颜色。
+* `titleSubTextColor`：主题的副标题文字颜色。
+* `legendTextColor`：图例的激活时文字颜色。
+* `legendUnableColor`：图例的非激活时文字颜色。
+* `axisTextColor`：坐标轴的文字颜色。
+* `axisLineColor`：坐标轴的轴线颜色。
+* `axisSplitLineColor`：坐标轴的分割线颜色，默认和轴线颜色一致。
+* `tooltipBackgroundColor`：提示框的背景颜色。
+* `tooltipFlagAreaColor`：提示框的阴影指示器的颜色。
+* `tooltipTextColor`：提示框的文字颜色。
+* `tooltipLabelColor`：提示框的十字指示器坐标轴标签的背景颜色。
+* `tooltipLineColor`：提示框的指示线的颜色。
+* `dataZoomTextColor`：区域缩放的文字颜色。
+* `dataZoomLineColor`：区域缩放的线条颜色。
+* `dataZoomSelectedColor`：区域缩放的选中区域颜色。
+* `colorPalette`：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
+
+相关接口：
+
+* `GetColor(int index)`：获得调色盘对应系列索引的颜色值。
+* `GetColorStr(int index)`：获得指定系列索引的十六进制颜色值字符串。
+* `GetColor(string hexColorStr)`：将字符串颜色值转成Color。
+
+## `Title`
+
+---
+标题组件，包含主标题和副标题。
+
+相关参数：
+
+* `show`：是否显示标题组件。
+* `text`：主标题文本，支持使用 `\n` 换行。
+* `textFontSize`：主标题文字的字体大小。
+* `subText`：副标题文本，支持使用 `\n` 换行。
+* `subTextFontSize`：副标题文字的字体大小。
+* `itemGap`：主副标题之间的间距。
+* `location`：标题显示位置 `Location` 。 `Location` 的参数如下：
+  * `align`：对齐方式。有以下对齐方式。
+    * `TopLeft`：左上角对齐。
+    * `TopRight`：右上角对齐。
+    * `TopCenter`：置顶居中对齐。
+    * `BottomLeft`：左下对齐。
+    * `BottomRight`：右下对齐。
+    * `BottomCenter`：底部居中对齐。
+    * `Center`：居中对齐。
+    * `CenterLeft`：中部靠左对齐。
+    * `CenterRight`：中部靠右对齐。
+  * `left`：离容器左侧的距离。
+  * `right`：离容器右侧的距离。
+  * `top`：离容器上侧的距离。
+  * `bottom`：离容器下侧的距离。
+
+## `Legend`
+
+---
+图例组件。图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
+
+相关参数：
+
+* `show`：是否显示图例组件。
+* `selectedMode`：选择模式。控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 `None` 关闭。有以下三种选择方式：
+  * `Multiple`：多选。
+  * `Single`：单选。
+  * `None`：无法选择。
+* `orient`：布局方式是横还是竖。
+  * `Horizonal`：水平。
+  * `Vertical`：垂直。
+* `location`：图例的显示位置 `Location` 。 `Location` 的参数如下：
+  * `align`：对齐方式。有以下对齐方式。
+    * `TopLeft`：左上角对齐。
+    * `TopRight`：右上角对齐。
+    * `TopCenter`：置顶居中对齐。
+    * `BottomLeft`：左下对齐。
+    * `BottomRight`：右下对齐。
+    * `BottomCenter`：底部居中对齐。
+    * `Center`：居中对齐。
+    * `CenterLeft`：中部靠左对齐。
+    * `CenterRight`：中部靠右对齐。
+  * `left`：离容器左侧的距离。
+  * `right`：离容器右侧的距离。
+  * `top`：离容器上侧的距离。
+  * `bottom`：离容器下侧的距离。
+* `itemWidth`：每个图例项的宽度。
+* `itemHeight`：每个图例项的高度。
+* `itemGap`：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
+* `itemFontSize`：图例项的字体大小。
+* `formatter`：图例内容字符串模版格式器。支持用 `\n` 换行。模板变量为图例名称 `{name}`
+* `data`：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是饼图，也可以是饼图单个数据的 `name`）。如果 `data` 没有被指定，会自动从当前系列中获取。指定 `data` 时里面的数据项和 `serie` 匹配时才会生效。
+
+相关接口：
+
+* `ClearData()`：清空数据。
+* `ContainsData(string name)`：是否包括指定名字的图例。
+* `RemoveData(string name)`：移除指定名字的图例。
+* `AddData(string name)`：添加图例项。
+* `GetData(int index)`：获得指定索引的图例。
+* `GetIndex(string legendName)`：获得指定图例的索引。
+
+## `Tooltip`
+
+---
+
+提示框组件。
+
+相关参数：
+
+* `show`：是否显示提示框组件。
+* `type`：提示框指示器类型。指示器类型有：
+  * `Line`：线性指示器。
+  * `Shadow`：阴影指示器。
+  * `None`：无指示器。
+  * `Corss`：十字准星指示器。坐标轴显示Label和交叉线。
+* `formatter`：提示框内容字符串模版格式器。支持用 `\n` 或 `<br/>` 换行。其中变量 `{a}`, `{b}`, `{c}`, `{d}` 在不同图表类型下代表数据含义为：
+  * 折线（区域）图、柱状（条形）图、K线图 : `{a}`（系列名称），`{b}`（类目值），`{c}`（数值）, `{d}`（无）。
+  * 散点图（气泡）图 : `{a}`（系列名称），`{b}`（数据名称），`{c}`（数值数组）, `{d}`（无）。
+  * 地图 : `{a}`（系列名称），`{b}`（区域名称），`{c}`（合并数值）, `{d}`（无）。
+  * 饼图、仪表盘、漏斗图: `{a}`（系列名称），`{b}`（数据项名称），`{c}`（数值）, `{d}`（百分比）。
+* `fixedWidth`：固定宽度。当同时设置 `fixedWidth` 和 `minWidth` 时，`fixedWidth` 比 `minWidth` 优先级高。
+* `fixedHeight`：固定高度。当同时设置 `fixedHeight` 和 `minHeight` 时，`fixedHeight` 比 `minHeight` 优先级高。
+* `minWidth`：最小宽度。当同时设置 `fixedWidth` 和 `minWidth` 时，`fixedWidth` 比 `minWidth` 优先级高。
+* `minHeight`：最小高度。当同时设置 f`ixedHeight` 和 `minHeight` 时，`fixedHeight` 比 `minHeight` 优先级高。
+
+## `DataZoom`
+
+---
+
+区域缩放组件。用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
+
+相关参数：
+
+* `show`：是否显示缩放区域。
+* `type`：区域缩放类型：
+  * `Inside`：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
+  * `Slider`：有单独的滑动条，用户在滑动条上进行缩放或漫游。
+* `filterMode`：数据过滤类型：
+  * `Filter`：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
+  * `WeakFilter`：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
+  * `Empty`：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
+  * `None`：不过滤数据，只改变数轴范围。
+* `orient`：布局方式是横还是竖。
+  * `Horizonal`：水平。
+  * `Vertical`：垂直。
+* `xAxisIndex`：控制哪一个 `x` 轴。
+* `yAxisIndex`：控制哪一个 `y` 轴。
+* `showDataShadow`：是否显示数据阴影。数据阴影可以简单地反应数据走势。
+* `showDetail`：是否显示 `detail`，即拖拽时候显示详细数值信息。
+* `zoomLock`：是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 `true` 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
+* `realtime`：拖动时，是否实时更新系列的视图。如果设置为 `false`，则只在拖拽结束的时候更新。
+* `backgroundColor`：组件的背景颜色。
+* `bottom`：组件离容器下侧的距离。
+* `height`：组件高度。
+* `rangeMode`：取值类型是取绝对值还是百分比。
+  * `Percent`：百分比。
+* `start`：数据窗口范围的起始百分比。范围是：0 ~ 100。
+* `end`：数据窗口范围的结束百分比。范围是：0 ~ 100。
+* `scrollSensitivity`：缩放区域组件的敏感度。值越高每次缩放所代表的数据越多。
+
+## `Grid`
+
+---
+
+网格组件。直角坐标系内绘图网格，单个 `grid` 内最多可以放置上下两个 `X` 轴，左右两个 `Y` 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。目前最多只能存在一个 `grid` 组件。
+
+相关参数：
+
+* `show`：是否显示直角坐标系网格组件。
+* `left`：组件离容器左侧的距离。
+* `right`：组件离容器右侧的距离。
+* `top`：组件离容器顶部的距离。
+* `bottom`：组件离容器底部的距离。
+* `backgroundColor`：背景颜色。
+
+## `XAxis`
+
+---
+
+直角坐标系 `grid` 中的 `X` 轴。单个 `grid` 组件最多只能放上下两个 `X` 轴。两个 `X` 轴存储在 `xAxises` 中。
+
+相关参数：
+
+* `show`：是否显示 `X` 轴。默认 `xAxises[0]` 为 `true`，`xAxises[1]` 为 `false`。
+* `type`：坐标轴类型。默认为 `Category`。有以下两种类型：
+  * `Value`：数值轴，用于连续数据。
+  * `Category`：类目轴，适用于离散的类目数据，为该类型时必须通过 `data` 设置类目数据。
+* `minMaxType`：坐标轴刻度最大最小值显示类型。默认为 `Default`。有以下三种类型：
+  * `Default`：0-最大值。
+  * `MinMax`：最小值-最大值。
+  * `Custom`：自定义的最小值-最大值。
+* `min`：设定的坐标轴刻度最小值，当 `minMaxType` 为 `Custom` 时有效。
+* `max`：设定的坐标轴刻度最大值，当 `minMaxType` 为 `Custom` 时有效。
+* `splitNumber`：坐标轴的分割段数。默认为 `5`。
+* `interval`：强制设置坐标轴分割间隔。无法在类目轴中使用。设置改值时 `splitNumber` 无效。
+* `splitLineType`：分割线类型。默认为 `Dashed`。有以下五种类型：
+  * `None`：不显示分割线。
+  * `Solid`：实线。
+  * `Dashed`：虚线。
+  * `Dotted`：点线。
+  * `DashDot`：点划线。
+  * `DashDotDot`：双点划线。
+* `boundaryGap`：坐标轴两边是否留白。默认为 `true`。
+* `data`：类目数据，在类目轴（`type: 'Category'`）中有效。
+
+相关接口：
+
+* `ClearData()`：清空类目数据。
+* `IsCategory()`：是否为类目轴。
+* `IsValue()`：是否为数值轴。
+* `AddData(string category, int maxDataNumber)`：添加一个类目到类目数据列表。
+
+## `YAxis`
+
+---
+
+直角坐标系 `grid` 中的 `Y` 轴。单个 `grid` 组件最多只能放左右两个 `Y` 轴。两个 `Y` 轴存储在 `yAxises` 中。
+
+相关参数：
+
+* `show`：是否显示 `Y` 轴。默认 `yAxises[0]` 为 `true`，`yAxises[1]` 为 `false`。
+* `type`：坐标轴类型。默认为 `Value`。有以下两种类型：
+  * `Value`：数值轴，用于连续数据。
+  * `Category`：类目轴，适用于离散的类目数据，为该类型时必须通过 `data` 设置类目数据。
+* `minMaxType`：坐标轴刻度最大最小值显示类型。默认为 `Default`。有以下三种类型：
+  * `Default`：0-最大值。
+  * `MinMax`：最小值-最大值。
+  * `Custom`：自定义的最小值-最大值。
+* `min`：设定的坐标轴刻度最小值，当 `minMaxType` 为 `Custom` 时有效。
+* `max`：设定的坐标轴刻度最大值，当 `minMaxType` 为 `Custom` 时有效。
+* `splitNumber`：坐标轴的分割段数。默认为 `5`。
+* `interval`：强制设置坐标轴分割间隔。无法在类目轴中使用。设置改值时 `splitNumber` 无效。
+* `splitLineType`：分割线类型。默认为 `Dashed`。支持以下五种类型：
+  * `None`：不显示分割线。
+  * `Solid`：实线。
+  * `Dashed`：虚线。
+  * `Dotted`：点线。
+  * `DashDot`：点划线。
+  * `DashDotDot`：双点划线。
+* `boundaryGap`：坐标轴两边是否留白。默认为 `false`。
+* `data`：类目数据，在类目轴（`type: 'Category'`）中有效。
+
+相关接口：
+
+* `ClearData()`：清空类目数据。
+* `IsCategory()`：是否为类目轴。
+* `IsValue()`：是否为数值轴。
+* `AddData(string category, int maxDataNumber)`：添加一个类目到类目数据列表。
+
+## `Series`
+
+---
+
+系列列表。每个系列通过 type 决定自己的图表类型。
+
+相关参数：
+
+* `show`：系列是否显示在图表上。
+* `type`：系列的图表类型。有以下几种类型：
+  * `Line`：折线图。
+  * `Bar`：柱状图。
+  * `Pie`：饼图。
+  * `Radar`：雷达图。
+  * `Scatter`：散点图。
+  * `EffectScatter`：带有涟漪特效动画的散点图。
+* `name`：系列名称。用于 `tooltip` 的显示，`legend` 的图例筛选。
+* `stack`：数据堆叠。同个类目轴上系列配置相同的 `stack` 值后，后一个系列的值会在前一个系列的值上相加。
+* `axisIndex`：使用的坐标轴轴的 `index`，在单个图表实例中存在多个坐标轴轴的时候有用。
+* `radarIndex`：雷达图所使用的 `radar` 组件的 `index`。
+* `areaStyle`：区域填充样式 `AreaStyle`。`AreaStyle`参数如下:
+  * `show`：是否显示区域填充。
+  * `origin`：区域填充的起始位置 `AreaOrigin`。有以下三种填充方式：
+    * `Auto`：填充坐标轴轴线到数据间的区域。
+    * `Start`：填充坐标轴底部到数据间的区域。
+    * `End`：填充坐标轴顶部到数据间的区域。
+  * `color`：区域填充的颜色，默认取 `serie` 对应的颜色。如果 `toColor` 不是默认值，则表示渐变色的起点颜色。
+  * `toColor`：区域填充的渐变色的终点颜色。
+  * `opacity`：图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
+* `symbol`：标记的图形 `SerieSymbol`：
+  * `type`：标记类型。支持以下六种类型：
+    * `EmptyCircle`：空心圆。
+    * `Circle`：实心圆。
+    * `Rect`：正方形。
+    * `Triangle`：三角形。
+    * `Diamond`：菱形。
+    * `None`：不显示标记。
+  * `sizeType`：标记图形的大小获取方式。支持以下三种类型：
+    * `Custom`：自定义大小。
+    * `FromData`：通过 `dataIndex` 从数据中获取，再乘以一个比例系数 `dataScale` 。
+    * `Callback`：通过回调函数 `sizeCallback` 获取。
+  * `size`：标记的大小。
+  * `selectedSize`：被选中的标记的大小。
+  * `dataIndex`：当 `sizeType` 指定为 `FromData` 时，指定的数据源索引。
+  * `dataScale`：当 `sizeType` 指定为 `FromData` 时，指定的倍数系数。
+  * `selectedDataScale`：当 `sizeType` 指定为 `FromData` 时，指定的高亮倍数系数。
+  * `sizeCallback`：当 `sizeType` 指定为 `Callback` 时，指定的回调函数。
+  * `selectedSizeCallback`：当 `sizeType` 指定为 `Callback` 时，指定的高亮回调函数。
+  * `color`：标记图形的颜色，默认和系列一致。
+  * `opacity`：图形标记的透明度。
+* `lineType`：折线图样式类型。支持以下九种类型：
+  * `Normal`：普通折线图。
+  * `Smooth`：平滑曲线。
+  * `StepStart`：阶梯线图：当前点。
+  * `StepMiddle`：阶梯线图：当前点和下一个点的中间。
+  * `StepEnd`：阶梯线图：下一个拐点。
+  * `Dash`：虚线。
+  * `Dot`：点线。
+  * `DashDot`：点划线。
+  * `DashDotDot`：双点划线。
+* `lineStyle`：线条样式`LineStyle`。`LineStyle`参数如下：
+  * `show`：是否显示线条。在折线图中无效。
+  * `type`：线条类型。支持以下五种类型：
+    * `None`：不显示分割线。
+    * `Solid`：实线。
+    * `Dashed`：虚线。
+    * `Dotted`：点线。
+    * `DashDot`：点划线。
+    * `DashDotDot`：双点划线。
+  * `color`：线条颜色。默认和 `serie` 一致。
+  * `width`：线条宽。
+  * `opacity`：线条的透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
+* `barWidth`：柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
+* `barGap`：不同系列的柱间距离。为百分比（如 `'0.3f'`，表示柱子宽度的 `30%`）。如果想要两个系列的柱子重叠，可以设置 `barGap` 为 `'-1f'`。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效，并且是对此坐标系中所有 `'bar'` 系列生效。
+* `barCategoryGap`：同一系列的柱间距离，默认为类目间距的20%，可设固定值。在同一坐标系上，此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效，并且是对此坐标系中所有 `'bar'` 系列生效。
+* `pieClickOffset`：鼠标点击时是否开启偏移，一般用在PieChart图表中。
+* `pieRoseType`：是否展示成南丁格尔图，通过半径区分数据大小。
+* `pieSpace`：饼图项间的空隙留白。
+* `pieCenter`：饼图的中心点。
+* `pieRadius`：饼图的半径。`radius[0]` 表示内径，`radius[1]` 表示外径。
+* `label`：图形上的文本标签 `SerieLabel`，可用于说明图形的一些数据信息，比如值，名称等。`SerieLabel` 的参数如下：
+  * `show`：是否显示文本标签。
+  * `position`：标签的位置。折线图时强制默认为 `Center`，支持以下 `5` 种位置：
+    * `Outside`：饼图扇区外侧，通过视觉引导线连到相应的扇区。只在饼图种可用。
+    * `Inside`：饼图扇区内部。只在饼图可用。
+    * `Center`：在中心位置（折线图，柱状图，饼图）。
+    * `Top`：顶部（柱状图）。
+    * `Bottom`：底部（柱状图）。
+  * `formatter`：标签内容字符串模版格式器。支持用 `\n` 换行。模板变量有：`{a}`：系列名；`{b}`：数据名；`{c}`：数据值；`{d}`：百分比。示例：`{b}:{c}`。
+  * `offset`：距离图形元素的偏移。
+  * `color`：自定义文字颜色，默认和系列的颜色一致。
+  * `backgroundColor`：标签的背景色，默认无颜色。
+  * `backgroundWidth`：标签的背景宽度。一般不用指定，不指定时则自动是文字的宽度。
+  * `backgroundHeight`：标签的背景高度。一般不用指定，不指定时则自动是文字的高度。
+  * `rotate`：标签的旋转。
+  * `paddingLeftRight`：标签文字和边框的左右边距。
+  * `paddingTopBottom`：标签文字和边框的上下边距。
+  * `fontSize`：标签文字的字体大小。
+  * `fontStyle`：标签文字的字体风格。
+  * `line`：是否显示视觉引导线。在 `label` 位置 设置为 `'Outside'` 的时候会显示视觉引导线。
+  * `lineWidth`：视觉引导线的宽度。
+  * `lineLength1`：视觉引导线第一段的长度。
+  * `lineLength2`：视觉引导线第二段的长度。
+  * `border`：是否显示边框。
+  * `borderWidth`：边框宽度。
+  * `borderColor`：边框颜色。
+* `highlightLabel`：高亮时的文本标签配置 `SerieLabel`。参数同上。
+* `animation`：起始动画 `Animation`。`Animation`的参数如下：
+  * `enable`：是否开起始画效果。
+  * `easing`：动画的缓动效果。支持以下动画效果：
+    * `Linear`：线性效果。
+  * `duration`：设定的动画时长，单位毫秒。
+  * `threshold`：是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
+  * `delay`：动画延时，单位毫秒。
+* `lineArrow`：折线图的箭头 `LineArrow`。`LineArrow`的参数如下：
+  * `show`：是否显示箭头。
+  * `position`：箭头显示位置。支持以下两种位置：
+    * `End`：末端显示。最后一个数据上显示箭头。
+    * `Start`：起始端显示。第一个数据上显示箭头。
+  * `width`：箭头宽。
+  * `height`：箭头长。
+  * `offset`：箭头偏移。默认箭头的中心点和数据坐标点一致，可通过 `offset` 调整偏移。
+  * `dent`：箭头的凹度。
+* `data`：系列中的数据项 `SerieData` 数组。`SerieData` 可以设置`1`到`n`维数据。`SerieData`的相关参数如下：
+  * `name`：数据项名称。
+  * `selected`：该数据项是否被选中。
+  * `showIcon`：是否显示图标。
+  * `iconImage`：图标的图片。
+  * `iconColor`：图标颜色。
+  * `iconWidth`：图标宽。
+  * `iconHeight`：图标高。
+  * `iconOffset`：图标偏移。
+
+相关接口：
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts问答](XCharts问答.md)
diff --git a/Doc/XCharts问答.md b/Doc/XCharts问答.md
new file mode 100644
index 00000000..abc9ca69
--- /dev/null
+++ b/Doc/XCharts问答.md
@@ -0,0 +1,66 @@
+# XCharts问答
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts配置项手册](XCharts配置项手册.md)
+
+1. 如何调整坐标轴与背景的边距？  
+   答：`Grid`组件，可调整上下左右边距。
+
+2. 如何让初始动画重新播放？  
+   答：调用`AnimationReset()`接口。
+
+3. 如何自定义折线图、饼图等数据项的颜色？  
+   答：通过`Theme`的`colorPalette`调整，或者部分`Serie`下的`LineStyle`和`ItemStyle`。
+
+4. 如何格式化文字，如我想给坐标轴标签加上单位？  
+   答：通过`formatter`参数，在`Legend`、`Axis`的`AxisLabel`、`Tooltop`、`Serie`的`Label`都提供改参数的配置。
+
+5. 如何让柱形图的柱子堆叠显示？  
+   答：设置`Serie`下的`stack`，`stack`相同的`serie`会堆叠显示在一个柱子上。
+
+6. 如何让柱形图的柱子同柱但不重叠？  
+   答：设置`Serie`下的`barGap`为`-1`，`stack`为空。
+
+7. 如何调整柱形图的柱子宽度和间距？  
+   答：调整`Serie`下的`barWidth`和`barGap`，多个`serie`时最后一个`serie`的`barWidth`和`barGap`有效。
+
+8. 如何调整柱形图单个柱子的颜色？  
+   答：目前暂不支持调整单子柱子的颜色，但可以通过两个`serie`同柱不堆叠来实现，通过设置数据项为`0`来达到类似效果。
+
+9. 如何调整图表的对齐方式？  
+   答：默认为左下角对齐，暂不支持调整。可以通过包一层parent来辅助控制。
+
+10. 可以显示超过1000以上的大数据吗？  
+   答：可以。但`UGUI`对单个`Graphic`限制`65000`个顶点，所以太多的数据不一定能显示完全。通过设置一些参数来减少图表的顶点数有助于显示更多数据。如缩小图表的尺寸，关闭或减少坐标轴的客户端绘制，关闭`Serie`的`symbol`和`label`显示等。折线图的普通线图`Normal`比平滑线图`Smooth`占用顶点数更少。
+
+11. 折线图可以画虚线、点线、点划线吗？  
+   答：可以。通过`Serie`下的`lineType`选择线条样式。当要显示的数据过多（成千以上）数据间过密时建议使用`Normal`或者`Step`样式。
+
+12. 如何限定Y轴（Value轴）的值范围？  
+   答：设置`Axis`下的`minMaxType`为`Custom`，自定义`min`和`max`。
+
+13. 如何自定义数值轴刻度大小？  
+   答：默认时通过`Axis`下的`splitNumer`进行自动划分。也可以设置`interval`自定义刻度大小。
+
+14. 如何在数据项顶上显示文本？  
+   答：通过设置`Serie`下的`Label`。
+
+15. 如何给数据项自定义图标？  
+   答：通过设置`Serie`的`data`下的数据项可单独设置`icon`相关参数。
+
+16. 锯齿太严重，如何让图表更顺滑？  
+   答：开启抗锯齿设置。调整UI渲染模式为Camera模式，开启MSAA，设置4倍或更高抗锯齿。锯齿只能减少难以避免，像素越高锯齿越不明显。
+
+17. 为什么鼠标移上图表`Tooltip`不显示？  
+   答：确认`Tooltip`是否开启。确认父节点是否关闭了鼠标事件。
+
+18. 如何取消`Tooltip`的竖线？  
+   答：设置`Tooltip`的`type`为`None`。
+
+19. 如何让Y轴（数值轴）显示多位小数？  
+   答：设置`Axis`下的`AxisLabel`中的`formatter`为`{value:f1}`或`{value:f2}`
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts配置项手册](XCharts配置项手册.md)
diff --git a/Doc/教程：5分钟上手XCharts.md b/Doc/教程：5分钟上手XCharts.md
new file mode 100644
index 00000000..2ac764ef
--- /dev/null
+++ b/Doc/教程：5分钟上手XCharts.md
@@ -0,0 +1,26 @@
+# 教程：5分钟上手XCharts
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts配置项手册](XCharts配置项手册.md)
+
+## 获取和引入 XCharts
+
+---
+
+你可以通过以下两种方式获取 `XCharts` 。
+
+1. 如果你只是想运行 `Demo` 查看效果，可以在 [Github](https://github.com/monitor1394/unity-ugui-XCharts)上的 [Clone or download](https://github.com/monitor1394/unity-ugui-XCharts/archive/master.zip)下载最新版本或去 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)下载稳定版本，将源码工程解压后用`unity`打开即可。
+2. 如果你要将 `XCharts` 加入你的项目中，可以在[Github](https://github.com/monitor1394/unity-ugui-XCharts)上下载最新的 [release](https://github.com/monitor1394/unity-ugui-XCharts/releases)稳定版本，将 `XCharts-vx.x.x.unitypackage` 通过 Unity 导入到你的项目中，或下载 Source code 解压后将内部的 `XCharts` 文件夹拷贝到你项目的 `Assets` 目录下。
+
+## 绘制一个简单的图表
+
+---
+
+1. 新建场景或在已有场景的 `Canvas` 下添加一个名为 `line_chart` 的 `GameObject`。
+2. 选中 `line_chart`，通过菜单栏 `Component->XCharts->LineChart` 或者  `Inspector` 视图的 `Add Component` 添加 `LineChart` 脚本。设置 `line_chart` 的尺寸，一个简单的折线图就出来了。
+3. 在 `Inspector` 视图下可以调整各个组件的参数，`Game` 视图会实时反馈调整的效果。各个组件的详细参数说明可查阅[XCharts配置项手册](XCharts配置项手册.md)。
+
+[返回首页](../Readme.md)  
+[XChartsAPI接口](XChartsAPI.md)  
+[XCharts配置项手册](XCharts配置项手册.md)
diff --git a/README.md b/README.md
index 4e0a7136..61b32505 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,11 @@ An ECharts style UGUI Charting Library for Unity
 [`ECharts`](https://www.echartsjs.com/examples/#chart-type-bar)风格的UGUI图表库
 
 QQ交流群：XCharts交流群（202030963）
+  
+[XCharts问答](Doc/XCharts问答.md)  
+[XChartsAPI接口](Doc/XChartsAPI.md)  
+[XCharts配置项手册](Doc/XCharts配置项手册.md)  
+[教程：5分钟上手XCharts](Doc/教程：5分钟上手XCharts.md)  
 
 ## 特性
 
@@ -23,6 +28,7 @@ QQ交流群：XCharts交流群（202030963）
 
 ## 更新日志
 
+* （2019.09.26）增加`XCharts问答`、`XChartsAPI接口`、`XCharts配置项手册`等文档
 * （2019.09.26）增加`AnimationReset()`重置初始化动画接口
 * （2019.09.26）优化`LineChart`的密集数据的曲线效果
 * （2019.09.25）优化`SerieData`的自定义图标不与`SerieLabel`关联，可单独控制是否显示
@@ -154,66 +160,3 @@ QQ交流群：XCharts交流群（202030963）
 ## 入门教程
 
 * [XCharts开源库介绍](https://blog.uwa4d.com/archives/UWALab_XCharts.html)
-
-## 配置项手册
-
-### `Theme` 主题
-
-* `theme`：主题，`Default`、`Light`、`Dark`三种可选主题
-* `themeInfo`：各主题对应的默认配置，也可自己调整
-
-### `Title` 标题
-
-* `show`：是否显示标题，标题默认现象在顶部
-* `text`：标题内容
-* `align`：对齐方式，`Left`、`Right`、`Center`三种可选对齐方式
-* `left`：左偏移量
-* `right`：右偏移量
-* `top`：顶部偏移量
-* `bottom`：低部偏移量
-
-### `Legend` 图例
-
-* `show`：是否显示图例
-* `location`：图例显示在的位置，可选`Left`、`Right`、`Top`、`Bottom`四个位置
-* `itemWidth`：图例标记的图形宽度
-* `itemHeight`：图例标记的图形高度
-* `itemGap`：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
-* `left`：左偏移量
-* `right`：右偏移量
-* `top`：顶部偏移量
-* `bottom`：低部偏移量
-* `dataList`：图例的字符串数据数组
-
-### `Coordinate` 坐标系
-
-* `show`：是否显示坐标系
-* `left`：左偏移量
-* `right`：右偏移量
-* `top`：顶部偏移量
-* `bottom`：低部偏移量
-* `tickness`：坐标轴线的粗细
-* `splitWidth`：坐标刻度的长度
-
-### `XAxis` X坐标轴
-
-* `type`：坐标轴类型。可选：
-  + `value` 数值轴，适用于连续数据。
-  + `category` 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
-* `splitNumber`：分割段数
-* `maxSplitNumber`：最大分割段数，当data的数据大于该值时，会删除第一个data数据再添加
-* `showSplitLine`：是否显示分割线
-* `splitLineType`：分割线线的类型，可选：
-  + `solid`：实线
-  + `dashed`：虚线
-  + `dotted`：点
-* `boundaryGap`：坐标轴两边是否留白。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(`band`)中间。
-* `data`：类目数据，在类目轴（`type`: `'category'`）中有效。
-
-### `YAxis` Y坐标轴，配置同`XAxis`
-
-### `SeriesList` 系列列表数据，和图例对应
-
-* `legendKey`：对应的图例`key`
-* `showDataNumber`：显示数据个数，默认为`0`全部显示
-* `dataList`：`float`型数据数组
\ No newline at end of file