Merge branch '1110-add-label-map'

ElemeFE · Nov 10, 2017 · 3bcbc8c · 3bcbc8c
2 parents 3b1759e + ce7fe89
commit 3bcbc8c
Show file tree

Hide file tree

Showing 20 changed files with 447 additions and 41 deletions.
diff --git a/docs/bar.md b/docs/bar.md
@@ -106,6 +106,39 @@
 </script>
 </script>
 
+#### 设置legend别名漏斗图
+
+<vuep template="#stacked-bar"></vuep>
+
+<script v-pre type="text/x-template" id="stacked-bar">
+<template>
+  <ve-bar :data="chartData" :settings="chartSettings"></ve-bar>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['日期', '成本', '利润'],
+        rows: [
+          { '日期': '1月1号', '成本': 123, '利润': 300 },
+          { '日期': '1月2号', '成本': 1223, '利润': 600 },
+          { '日期': '1月3号', '成本': 2123, '利润': 9000 },
+          { '日期': '1月4号', '成本': 4123, '利润': 1200 },
+          { '日期': '1月5号', '成本': 3123, '利润': 1500 },
+          { '日期': '1月6号', '成本': 7123, '利润': 2000 }
+        ]
+      }
+      this.chartSettings =  {
+        legendName: {
+          '成本': '成本biubiu～'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 堆叠条形图
 
 <vuep template="#stacked-bar"></vuep>

diff --git a/docs/funnel.md b/docs/funnel.md
@@ -92,6 +92,37 @@
 </script>
 </script>
 
+#### 修改legend别名漏斗图
+
+<vuep template="#change-legend-name"></vuep>
+
+<script v-pre type="text/x-template" id="change-legend-name">
+<template>
+  <ve-funnel :data="chartData" :settings="chartSettings"></ve-funnel>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['状态', '数值'],
+        rows: [
+          { '状态': '展示', '数值': 0.9 },
+          { '状态': '访问', '数值': 0.6 },
+          { '状态': '点击', '数值': 0.3 },
+          { '状态': '订单', '数值': 0.1 }
+        ]
+      },
+      this.chartSettings = {
+        legendName: {
+          '订单': '订单biubiu～'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 金字塔
 
 <vuep template="#pyramid-funnel"></vuep>

diff --git a/docs/map.md b/docs/map.md
@@ -67,6 +67,37 @@
 </script>
 </script>
 
+#### 修改指标名称
+
+<vuep template="#change-metrics-name"></vuep>
+
+<script v-pre type="text/x-template" id="change-metrics-name">
+<template>
+  <ve-map :data="chartData" :settings="chartSettings"></ve-map>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['位置', 'GDP'],
+        rows: [
+          { '位置': '延庆区', 'GDP': 123 },
+          { '位置': '密云区', 'GDP': 1223 },
+          { '位置': '平谷区', 'GDP': 2123 },
+          { '位置': '海淀区', 'GDP': 4123 }
+        ]
+      }
+      this.chartSettings = {
+        labelMap: {
+          'GDP': '国内生产总值'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 设置选中模式
 
 <vuep template="#set-selection"></vuep>

diff --git a/docs/pie.md b/docs/pie.md
@@ -67,6 +67,40 @@
 </script>
 </script>
 
+#### 修改指标名称
+
+<vuep template="#change-legend-name"></vuep>
+
+<script v-pre type="text/x-template" id="change-legend-name">
+<template>
+  <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['日期', '成本', '利润'],
+        rows: [
+          { '日期': '1月1号', '成本': 123, '利润': 3 },
+          { '日期': '1月2号', '成本': 1223, '利润': 6 },
+          { '日期': '1月3号', '成本': 2123, '利润': 90 },
+          { '日期': '1月4号', '成本': 4123, '利润': 12 },
+          { '日期': '1月5号', '成本': 3123, '利润': 15 },
+          { '日期': '1月6号', '成本': 7123, '利润': 20 }
+        ]
+      }
+      this.chartSettings = {
+        limitShowNum: 5,
+        legendName: {
+          '其他': '别的时间的时候biu~'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 限制显示条数饼图
 
 <vuep template="#limited-number"></vuep>

diff --git a/docs/radar.md b/docs/radar.md
@@ -37,6 +37,43 @@
 </script>
 </script>
 
+#### 修改指标名称
+
+<vuep template="#change-metrics-name"></vuep>
+
+<script v-pre type="text/x-template" id="change-metrics-name">
+<template>
+  <ve-radar :data="chartData" :settings="chartSettings"></ve-radar>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
+        rows: [
+          { '日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
+          { '日期': '1月2日', '销售额-1季度': 1223, '销售额-2季度': 1523, '占比': 0.345, '其他': 100 },
+          { '日期': '1月3日', '销售额-1季度': 2123, '销售额-2季度': 1523, '占比': 0.7, '其他': 100 },
+          { '日期': '1月4日', '销售额-1季度': 4123, '销售额-2季度': 1523, '占比': 0.31, '其他': 100 },
+          { '日期': '1月5日', '销售额-1季度': 3123, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
+          { '日期': '1月6日', '销售额-1季度': 7123, '销售额-2季度': 1523, '占比': 0.65, '其他': 100 }
+        ]
+      }
+      this.chartSettings = {
+        labelMap: {
+          '日期': 'date',
+          '销售额-1季度': 'sales-1',
+          '销售额-2季度': 'sales-2',
+          '占比': 'percent',
+          '其他': 'other'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### settings 配置项
 
 | 配置项 | 简介 | 类型 | 备注 |

diff --git a/docs/waterfall.md b/docs/waterfall.md
@@ -61,6 +61,36 @@
 </script>
 </script>
 
+#### 修改指标名称
+
+<vuep template="#change-metrics-name"></vuep>
+
+<script v-pre type="text/x-template" id="change-metrics-name">
+<template>
+  <ve-waterfall :data="chartData" :settings="chartSettings"></ve-waterfall>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['活动', '时间'],
+        rows: [
+          { '活动': '吃饭', '时间': 0.1 },
+          { '活动': '睡觉', '时间': 0.2 },
+          { '活动': '打豆豆', '时间': 0.3 }
+        ]
+      }
+      this.chartSettings = {
+        labelMap: {
+          '时间': 'time'
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 设置 总计、剩余 的名称
 
 <vuep template="#set-label"></vuep>

diff --git a/examples/data/funnel.js b/examples/data/funnel.js
@@ -98,6 +98,23 @@ export default {
           }
         }
       }
+    },
+    {
+      name: '设置legend别名漏斗图',
+      data: {
+        columns: ['状态', '数值'],
+        rows: [
+          { '状态': '展示', '数值': 0.9 },
+          { '状态': '访问', '数值': 0.6 },
+          { '状态': '点击', '数值': 0.3 },
+          { '状态': '订单', '数值': 0.00001 }
+        ]
+      },
+      settings: {
+        legendName: {
+          '订单': '订单biubiu～'
+        }
+      }
     }
   ]
 }
diff --git a/examples/data/map.js b/examples/data/map.js
@@ -86,6 +86,40 @@ export default {
         position: 'province/jilin',
         selectData: true
       }
+    },
+    {
+      name: '设置数据别名',
+      data: {
+        columns: ['位置', 'GDP', '人口'],
+        rows: [
+          { '位置': '吉林', 'GDP': 123, '人口': 234 },
+          { '位置': '北京', 'GDP': 1223, '人口': 1234 },
+          { '位置': '上海', 'GDP': 2123, '人口': 3234 },
+          { '位置': '浙江', 'GDP': 4123, '人口': 4234 }
+        ]
+      },
+      settings: {
+        labelMap: {
+          '人口': '人口密度'
+        }
+      }
+    },
+    {
+      name: '设置legendName别名地图',
+      data: {
+        columns: ['位置', 'GDP', '人口'],
+        rows: [
+          { '位置': '吉林', 'GDP': 123, '人口': 234 },
+          { '位置': '北京', 'GDP': 1223, '人口': 1234 },
+          { '位置': '上海', 'GDP': 2123, '人口': 3234 },
+          { '位置': '浙江', 'GDP': 4123, '人口': 4234 }
+        ]
+      },
+      settings: {
+        legendName: {
+          '人口': '人口密度'
+        }
+      }
     }
   ]
 }
diff --git a/examples/data/pie.js b/examples/data/pie.js
@@ -173,6 +173,26 @@ export default {
           }
         }
       }
+    },
+    {
+      name: '设置legend别名饼图',
+      data: {
+        columns: ['日期', '余额', '比率'],
+        rows: [
+          { '日期': '1-1', '余额': 123, '比率': 0.1 },
+          { '日期': '1-2', '余额': 1223, '比率': 0.2 },
+          { '日期': '1-3', '余额': 2123, '比率': 0.3 },
+          { '日期': '1-4', '余额': 4123, '比率': 0.4 },
+          { '日期': '1-5', '余额': 3123, '比率': 0.5 },
+          { '日期': '1-6', '余额': 7123, '比率': 0.6 }
+        ]
+      },
+      settings: {
+        limitShowNum: 5,
+        legendName: {
+          '其他': '别的时间的时候biu~'
+        }
+      }
     }
   ]
 }
diff --git a/examples/data/radar.js b/examples/data/radar.js
@@ -54,6 +54,41 @@ export default {
           }
         }
       }
+    },
+    {
+      name: '雷达图配置labelMap',
+      data: {
+        columns: ['city', 'housePrices', 'income', 'proportion'],
+        rows: [
+          { 'housePrices': 10000, 'income': 4000, 'proportion': 0.4, 'city': '北京' },
+          { 'housePrices': 20000, 'income': 6000, 'proportion': 0.6, 'city': '上海' },
+          { 'housePrices': 30000, 'income': 8000, 'proportion': 0.2, 'city': '广州' }
+        ]
+      },
+      settings: {
+        labelMap: {
+          'city': '城市',
+          'housePrices': '房价',
+          'income': '收入',
+          'proportion': '人口比例'
+        }
+      }
+    },
+    {
+      name: '雷达图配置legendName',
+      data: {
+        columns: ['城市', '房价', '收入', '人口比例'],
+        rows: [
+          { '房价': 10000, '收入': 4000, '人口比例': 0.4, '城市': '北京' },
+          { '房价': 20000, '收入': 6000, '人口比例': 0.6, '城市': '上海' },
+          { '房价': 30000, '收入': 8000, '人口比例': 0.2, '城市': '广州' }
+        ]
+      },
+      settings: {
+        legendName: {
+          '北京': 'BeiJing'
+        }
+      }
     }
   ]
 }
diff --git a/examples/data/ring.js b/examples/data/ring.js
@@ -125,6 +125,26 @@ export default {
         radius: [100, 10],
         offsetY: 300
       }
+    },
+    {
+      name: '设置legend别名环图',
+      data: {
+        columns: ['日期', '余额', '比率'],
+        rows: [
+          { '日期': '1-1', '余额': 123, '比率': 0.1 },
+          { '日期': '1-2', '余额': 1223, '比率': 0.2 },
+          { '日期': '1-3', '余额': 2123, '比率': 0.3 },
+          { '日期': '1-4', '余额': 4123, '比率': 0.4 },
+          { '日期': '1-5', '余额': 3123, '比率': 0.5 },
+          { '日期': '1-6', '余额': 7123, '比率': 0.6 }
+        ]
+      },
+      settings: {
+        limitShowNum: 5,
+        legendName: {
+          '其他': '别的时间的时候biu~'
+        }
+      }
     }
   ]
 }