Skip to content

Commit

Permalink
修改:更新文档
Browse files Browse the repository at this point in the history
  • Loading branch information
quietcoder committed Jun 18, 2017
1 parent a9b7ca9 commit 9536198
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 22 deletions.
18 changes: 3 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,7 @@ export default {
</script>
```

> 目前支持的图表有 line, bar, histogram, waterfall, pie, ring, funnel, radar

### 属性
### LICENSE
---
| 配置项 | 简介 | 类型 | 示例 | 备注 |
| --- | --- | --- | --- | --- |
| data | 图表数据 | Object | `{ columns: [], rows: [] }` | columns代表指标和维度名称, rows为数据内容 |
| settings | 图表配置项 | Object | `{ "yAxisType": [ "KMB", "percent" ] }` | |
| colors | 颜色列表 | Array | `[ "#19d4ae", "#5ab1ef", "#fa6e86", "#ffb980", "#0067a6", "#c4b4e4" ]` | |
| tooltip | 是否显示提示框 | Boolean | `false` | 默认为true |
| grid | 网格配置 | Object | `{ left: 20, right: 20 }` | |
| scale | 是否是脱离 0 值比例 | Object | `{ x: true, y: true }` | 设置成 true 后坐标刻度不会强制包含零刻度,默认都是false |
| events | 为图表绑定事件 | Object | `{ click: function (e) { console.log(e) } }` | |
| before-config | 对数据提前进行额外的处理 | Function | `function (data) { /* do something */return data; }` | 在数据转化为配置项开始前触发,参数为data,需返回表格数据
| after-config | 对生成好的echarts配置进行额外的处理 | Function | `function (options) { /* do something */return options; }` | 在数据转化为配置项结束后触发,参数为options, 需返回echarts配置

MIT
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ npm i v-charts -S
```html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>
```

#### 示例
Expand Down
2 changes: 1 addition & 1 deletion docs/histogram.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

#### 示例

<iframe width="100%" height="450" src="//jsfiddle.net/vue_echarts/1Le0wps5/8/embedded/result,html,js/?bodyColor=fff" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<iframe width="100%" height="450" src="//jsfiddle.net/vue_echarts/1Le0wps5/21/embedded/result,html,js/?bodyColor=fff" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

#### settings 配置项

Expand Down
11 changes: 8 additions & 3 deletions docs/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ V-Charts 的属性分为两种,一种是全部图表都具有的属性,例
| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| data | 图表数据 | Object | columns 代表指标和维度名称,<br>rows 为数据内容 |
| width | 图表宽度 | String | 默认 100% |
| width | 图表宽度 | String | 默认 auto |
| height | 图表高度 | String | 默认 400px |
| settings | 图表配置项 | Object | 内容参考图表具体的配置 |
| colors | 颜色列表 | Array | 默认<br>`['#19d4ae', '#5ab1ef', '#fa6e86',`<br>` '#ffb980', '#0067a6', '#c4b4e4',`<br>` '#d87a80', '#9cbbff', '#d9d0c7',`<br>` '#87a997', '#d49ea2', '#5b4947']` |
Expand All @@ -18,8 +18,13 @@ V-Charts 的属性分为两种,一种是全部图表都具有的属性,例
| legend-position | 图例显示位置 | String | 可选`'left', 'top', 'right', 'bottom'` |
| grid | 网格配置 | Object | 内容参考<br>http://echarts.baidu.com/option.html#grid |
| events | 为图表绑定事件 | Object | 内容为包含事件名-事件处理函数的对象,例如<br>`{ click: function (e) { console.log(e) }}` |
| before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发<br>参数为 data<br>需返回表格数据
| after-config | 对生成好的echarts配置<br>进行额外的处理 | Function | 在数据转化为配置项结束后触发<br>参数为 options<br>需返回 echarts 配置
| before-config | 对数据提前进行额外的处理 | Function | 在数据转化为配置项开始前触发<br>参数为 data,返回值为表格数据 |
| after-config | 对生成好的echarts配置<br>进行额外的处理 | Function | 在数据转化为配置项结束后触发<br>参数为 options,返回值为 echarts 配置 |
| mark-line | 图表标线 | Object | 配置项内容对应echarts中关于markLine的部分 |
| mark-point | 图表标线 | Object | 配置项内容对应echarts中关于markPoint的部分 |
| mark-area | 图表标线 | Object | 配置项内容对应echarts中关于markArea的部分 |
| visualMap | 视觉映射组件 | Array, Object | 内容参考<br>http://echarts.baidu.com/option.html#visualMap |
| dataZoom | 视觉映射组件 | Array, Object | 内容参考<br>http://echarts.baidu.com/option.html#dataZoom |

另外一种是图表自身的属性,比如用户设置数据类型的`dataType`,这样的属性被置于settings内,每种图表的配置项不完全相同,具体参数参考下述图表文档中的配置项

Expand Down
2 changes: 1 addition & 1 deletion docs/start.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ V-Charts的每种图表组件,都单独打包到lib文件夹下
|- lib/
|- line.js -------------- 折线图
|- bar.js --------------- 条形图
|- histogram.js ------------ 柱状图
|- histogram.js --------- 柱状图
|- pie.js --------------- 饼图
|- ring.js -------------- 环图
|- funnel.js ------------ 漏斗图
Expand Down
2 changes: 1 addition & 1 deletion docs/toggle.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

#### 示例

<iframe width="100%" height="450" src="//jsfiddle.net/vue_echarts/r5ccqtdy/4/
<iframe width="100%" height="450" src="//jsfiddle.net/vue_echarts/r5ccqtdy/6/
embedded/result,html,js/?bodyColor=fff" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

为了方便使用一份数据即可生成不同的表格,可以使用`<ve-chart>`组件,切换图表类型则只需要改变settings即可

0 comments on commit 9536198

Please sign in to comment.