Merge branch 'dev'

README.md

@@ -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

docs/README.md

@@ -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>
 ```
 
 #### 示例

docs/histogram.md

@@ -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 配置项
 

docs/line.md

@@ -15,7 +15,12 @@
 | axisSite | 指标所在的轴 | Object | 默认不在right轴的指标都在left轴 |
 | stack | 堆叠选项 | Object | - |
 | area | 是否展示为面积图 | Boolean | 默认为false |
+| scale | 是否是脱离 0 值比例 | Object | 设置成 true 后坐标刻度不会<br>强制包含零刻度，默认都是 false |
+| min | 左右坐标轴最小值 | Array | - |
+| max | 左右坐标轴最大值 | Array | - |
 
 > 备注1. axisSite 可以设置 left 和 right，例如示例所示 `axisSite: { right: ['占比'] }` 即将占比的数据置于右轴上。
 
 > 备注2. stack 用于将两数据堆叠起来，例如实例中所示`stack: { '销售额': ['销售额-1季度', '销售额-2季度'] }` 即将'销售额-1季度', '销售额-2季度'相应的数据堆叠在一起。
+
+> 备注3. min和max的值可以直接设置为数字，例如：`[100, 300]`；也可以设置为`['dataMin', 'dataMin']`, `['dataMax', 'dataMax']`，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。

docs/props.md

@@ -9,18 +9,22 @@ 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']` |
-| tooltip-visible | 是否显示提示框 | Boolean | 默认为 false，<br>设置为true时需要额外引入<br>'echarts/lib/component/tooltip' |
-| legend-visible | 是否显示Legend | Boolean | 默认为 false，<br>设置为true时需要额外引入<br>'echarts/lib/component/legend' |
-| axis-visible | 是否显示坐标轴 | Boolean | 默认为 true |
+| tooltip-visible | 是否显示提示框 | Boolean | 默认为 true |
+| legend-visible | 是否显示图例 | Boolean | 默认为 true |
+| legend-position | 图例显示位置 | String | 可选`'left', 'top', 'right', 'bottom'` |
 | grid | 网格配置 | Object | 内容参考<br>http://echarts.baidu.com/option.html#grid |
-| scale | 是否是脱离 0 值比例 | Object | 设置成 true 后坐标刻度不会<br>强制包含零刻度，默认都是 false |
 | 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内，每种图表的配置项不完全相同，具体参数参考下述图表文档中的配置项
 

docs/start.md

@@ -31,7 +31,7 @@ V-Charts的每种图表组件，都单独打包到lib文件夹下
 |- lib/
     |- line.js  -------------- 折线图
     |- bar.js  --------------- 条形图
-    |- histogram.js  ------------ 柱状图
+    |- histogram.js  --------- 柱状图
     |- pie.js  --------------- 饼图
     |- ring.js  -------------- 环图
     |- funnel.js  ------------ 漏斗图

docs/toggle.md

@@ -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即可

examples/components/code-section.vue

@@ -1,5 +1,5 @@
 <template>
-  <pre :class="langClass"><code :class="langClass" v-html='innerCode'></code></pre>
+  <pre :class="cls"><code :class="cls" v-html='innerCode'></code></pre>
 </template>
 
 <script>
@@ -17,11 +17,13 @@ export default {
 
   computed: {
     innerCode () {
-      const content = this.json ? JSON.stringify(this.content, null, 2) : this.content
+      const content = this.json
+        ? JSON.stringify(this.content, null, 2)
+        : this.content
       return Prism.highlight(content, Prism.languages[this.lang])
     },
 
-    langClass () {
+    cls () {
       return { [`language-${this.lang}`]: true }
     }
   }

examples/components/sidebar.vue

@@ -15,14 +15,14 @@
 </template>
 
 <script>
-import chartData from '../data/index'
+import chartData from '../test-data/index'
 
 const routerInfo = {
-  '介绍': [
-    { name: '开始使用', url: '/' }
-  ],
   '图表': Object.keys(chartData).map(key => {
-    return { name: chartData[key].name, url: `/test-item/${chartData[key].type}` }
+    return {
+      name: chartData[key].name,
+      url: `/test-item/${chartData[key].type}`
+    }
   }),
   '其他': [
     { name: '事件监听', url: '/eventer' },