新增：桑基图

README.md

@@ -14,7 +14,7 @@
 
 ### 文档
 
-[https://elemefe.github.io/v-charts/#/](https://elemefe.github.io/v-charts/#/)
+[https://elemefe.github.io/v-charts/](https://elemefe.github.io/v-charts/#/)
 
 ### 安装
 ---

docs/sankey.md

@@ -0,0 +1,57 @@
+### 桑基图
+
+#### 示例
+
+// TODO: add a jsfiddle demo
+
+#### 设置数据类型
+
+<vuep template="#set-data-type"></vuep>
+
+<script v-pre type="text/x-template" id="set-data-type">
+<template>
+  <ve-sankey :data="chartData" :settings="chartSettings"></ve-sankey>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['页面', '访问量'],
+        rows: [
+          { '页面': '首页', '访问量': 100000 },
+          { '页面': '列表页a', '访问量': 20000 },
+          { '页面': '列表页b', '访问量': 80000 },
+          { '页面': '内容页a-1', '访问量': 10000 },
+          { '页面': '内容页a-2', '访问量': 10000 },
+          { '页面': '内容页b-1', '访问量': 60000 },
+          { '页面': '内容页b-2', '访问量': 20000 }
+        ]
+      }
+      this.chartSettings = {
+        links: [
+          { source: '首页', target: '列表页a', value: 0.5 },
+          { source: '首页', target: '列表页b', value: 0.5 },
+          { source: '列表页a', target: '内容页a-1', value: 0.1 },
+          { source: '列表页a', target: '内容页a-2', value: 0.4 },
+          { source: '列表页b', target: '内容页b-1', value: 0.2 },
+          { source: '列表页b', target: '内容页b-2', value: 0.3 }
+        ],
+        dataType: ['KMB', 'percent']
+      }
+    }
+  }
+</script>
+</script>
+
+
+
+#### settings 配置项
+
+| 配置项 | 简介 | 类型 | 备注 |
+| --- | --- | --- | --- |
+| dimension | 维度 | String | 默认columns第一项为维度 |
+| metrics | 指标 | String | 默认columns第二项为指标 |
+| dataType | 数据类型 | Array | 数组的第一项为item的数据类型，<br>第二项为line的数据类型，<br>可选值: KMB, normal, percent |
+| links | 节点间的关系数据 | Array | 内容参考[文档](http://echarts.baidu.com/option.html#series-sankey.links) |
+| digit | 设置数据类型为percent时保留的位数 | Number | 默认为2 |

docs/sidebar.md

@@ -12,6 +12,7 @@
   - [漏斗图](/funnel)
   - [雷达图](/radar)
   - [地图](/map)
+  - [桑基图](/sankey)
 - 其他
   - [事件监听](/event)
   - [图表切换](/toggle)

examples/data/index.js

@@ -8,6 +8,7 @@ import funnel from './funnel'
 import radar from './radar'
 import chart from './chart'
 import map from './map'
+import sankey from './sankey'
 
 export default {
   bar,
@@ -19,5 +20,6 @@ export default {
   funnel,
   radar,
   chart,
-  map
+  map,
+  sankey
 }

examples/data/sankey.js

@@ -0,0 +1,57 @@
+export default {
+  name: '桑基图',
+  type: 'sankey',
+  data: [
+    {
+      name: '基本桑基图',
+      data: {
+        columns: ['页面', '访问量'],
+        rows: [
+          { '页面': '首页', '访问量': 1000 },
+          { '页面': '列表页a', '访问量': 200 },
+          { '页面': '列表页b', '访问量': 800 },
+          { '页面': '内容页a-1', '访问量': 100 },
+          { '页面': '内容页a-2', '访问量': 100 },
+          { '页面': '内容页b-1', '访问量': 600 },
+          { '页面': '内容页b-2', '访问量': 200 }
+        ]
+      },
+      settings: {
+        links: [
+          { source: '首页', target: '列表页a' },
+          { source: '首页', target: '列表页b' },
+          { source: '列表页a', target: '内容页a-1' },
+          { source: '列表页a', target: '内容页a-2' },
+          { source: '列表页b', target: '内容页b-1' },
+          { source: '列表页b', target: '内容页b-2' }
+        ]
+      }
+    },
+    {
+      name: '设置数据类型桑基图',
+      data: {
+        columns: ['页面', '访问量'],
+        rows: [
+          { '页面': '首页', '访问量': 100000 },
+          { '页面': '列表页a', '访问量': 20000 },
+          { '页面': '列表页b', '访问量': 80000 },
+          { '页面': '内容页a-1', '访问量': 10000 },
+          { '页面': '内容页a-2', '访问量': 10000 },
+          { '页面': '内容页b-1', '访问量': 60000 },
+          { '页面': '内容页b-2', '访问量': 20000 }
+        ]
+      },
+      settings: {
+        links: [
+          { source: '首页', target: '列表页a', value: 0.1 },
+          { source: '首页', target: '列表页b', value: 0.1 },
+          { source: '列表页a', target: '内容页a-1', value: 0.1 },
+          { source: '列表页a', target: '内容页a-2', value: 0.1 },
+          { source: '列表页b', target: '内容页b-1', value: 0.1 },
+          { source: '列表页b', target: '内容页b-2', value: 0.1 }
+        ],
+        dataType: ['KMB', 'percent']
+      }
+    }
+  ]
+}

examples/pages/chart.vue

@@ -34,6 +34,7 @@ import VeFunnel from '../../src/packages/funnel'
 import VeRadar from '../../src/packages/radar'
 import VeChart from '../../src/packages/chart'
 import VeMap from '../../src/packages/map'
+import VeSankey from '../../src/packages/sankey'
 import CHART_DATA from '../data'
 
 export default {
@@ -73,7 +74,8 @@ export default {
     VeFunnel,
     VeRadar,
     VeChart,
-    VeMap
+    VeMap,
+    VeSankey
   }
 }
 </script>

src/index.es.js

@@ -9,6 +9,7 @@ import VeRadar from './packages/radar'
 import VeChart from './packages/chart'
 import VeMap from './packages/map'
 import VeBmap from './packages/bmap'
+import VeSankey from './packages/sankey'
 
 const components = [
   VeBar,
@@ -21,7 +22,8 @@ const components = [
   VeRadar,
   VeChart,
   VeMap,
-  VeBmap
+  VeBmap,
+  VeSankey
 ]
 
 function install (Vue, _) {
@@ -42,5 +44,6 @@ export {
   VeChart,
   VeMap,
   VeBmap,
+  VeSankey,
   install
 }

src/packages/index/index.js

@@ -9,6 +9,7 @@ import VeRadar from '../radar'
 import VeChart from '../chart'
 import VeMap from '../map'
 import VeBmap from '../bmap'
+import VeSankey from '../sankey'
 
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/chart/funnel'
@@ -27,7 +28,8 @@ const components = [
   VeRadar,
   VeChart,
   VeMap,
-  VeBmap
+  VeBmap,
+  VeSankey
 ]
 
 function install (Vue, _) {
@@ -52,5 +54,6 @@ export default {
   VeChart,
   VeMap,
   VeBmap,
+  VeSankey,
   install
 }

src/packages/sankey/index.js

@@ -0,0 +1,11 @@
+import echarts from '../../echarts-base'
+import { sankey } from './main'
+import Core from '../../core'
+export default {
+  name: 'VeSankey',
+  mixins: [Core],
+  created () {
+    this.chartHandler = sankey
+    this.echartsLib = echarts
+  }
+}

src/packages/sankey/main.js

@@ -0,0 +1,84 @@
+import { getFormated } from '../../utils'
+import 'echarts/lib/chart/sankey'
+
+function getTooltip (args) {
+  const {
+    itemDataType,
+    linksDataType,
+    digit
+  } = args
+  return {
+    trigger: 'item',
+    formatter (item) {
+      const { data, marker, value, name } = item
+      return data && data.source
+        ? `${name}: ${getFormated(value, linksDataType, digit)}`
+        : `${marker} ${name}: ${getFormated(value, itemDataType, digit)}`
+    }
+  }
+}
+
+function getSeries (args) {
+  const {
+    rows,
+    dimension,
+    metrics,
+    links,
+    valueFull
+  } = args
+  const dataMap = {}
+  const seriesData = rows.map(row => {
+    dataMap[row[dimension]] = row[metrics]
+    return { name: row[dimension], value: row[metrics] }
+  })
+  let innerLinks = null
+
+  if (!valueFull) {
+    innerLinks = links.map(link => {
+      return link.value == null
+        ? Object.assign({ value: dataMap[link.target] }, link)
+        : link
+    })
+  } else {
+    innerLinks = links
+  }
+
+  const result = {
+    type: 'sankey',
+    data: seriesData,
+    links: innerLinks
+  }
+  return [result]
+}
+
+export const sankey = (columns, rows, settings, extra) => {
+  const {
+    links,
+    dimension = columns[0],
+    metrics = columns[1],
+    dataType = ['normal', 'normal'],
+    digit = 2,
+    valueFull = false
+  } = settings
+
+  if (!links) {
+    console.warn('links is needed in settings!')
+    return
+  }
+
+  const itemDataType = dataType[0]
+  const linksDataType = dataType[1]
+  const tooltip = getTooltip({
+    itemDataType,
+    linksDataType,
+    digit
+  })
+  const series = getSeries({
+    rows,
+    dimension,
+    metrics,
+    links,
+    valueFull
+  })
+  return { tooltip, series }
+}

src/utils.js

@@ -105,5 +105,5 @@ export const isArray = (v) => {
 }
 
 export const isObject = (v) => {
-  return v != null && typeof v === 'object' && !isArray(v)
+  return getType(v) === '[object Object]'
 }