新增：热力图

ElemeFE · Nov 10, 2017 · 1c95626 · 1c95626
1 parent 3bcbc8c
commit 1c95626
Show file tree

Hide file tree

Showing 23 changed files with 765 additions and 19 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- --lts
+- stable
 branches:
   only:
   - master

diff --git a/docs/bmap.md b/docs/bmap.md
@@ -21,3 +21,6 @@
 | --- | --- | --- | --- |
 | key | 百度地图 access_key | String | 可[由此](http://lbsyun.baidu.com/apiconsole/key)获取 |
 | bmap | 百度地图配置项 | Object | 参考[文档](https://github.com/ecomfe/echarts/tree/master/extension/bmap#使用)配置 |
+
+> 备注：百度地图在与其他地图搭配使用时，需要额外引入相应的 echarts 模块，例如使用热力图，则需
+要`import 'echarts/lib/chart/heatmap'`。
diff --git a/docs/heatmap.md b/docs/heatmap.md
@@ -0,0 +1,236 @@
+### 热力图
+
+#### 示例
+
+<!-- TODO: add demo here -->
+
+#### 直角坐标系热力图
+
+<vuep template="#cartesian-heatmap"></vuep>
+
+<script v-pre type="text/x-template" id="cartesian-heatmap">
+<template>
+  <ve-heatmap :data="chartData"></ve-heatmap>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['时间', '地点', '人数'],
+        rows: [
+          { '时间': '星期一', '地点': '北京', '人数': 1000 },
+          { '时间': '星期二', '地点': '上海', '人数': 400 },
+          { '时间': '星期三', '地点': '杭州', '人数': 800 },
+          { '时间': '星期二', '地点': '深圳', '人数': 200 },
+          { '时间': '星期三', '地点': '长春', '人数': 100 },
+          { '时间': '星期五', '地点': '南京', '人数': 300 },
+          { '时间': '星期四', '地点': '江苏', '人数': 800 },
+          { '时间': '星期一', '地点': '北京', '人数': 700 },
+          { '时间': '星期三', '地点': '上海', '人数': 300 },
+          { '时间': '星期二', '地点': '杭州', '人数': 500 }
+        ]
+      }
+    }
+  }
+</script>
+</script>
+
+#### 配置坐标轴
+
+<vuep template="#axis-settings"></vuep>
+
+<script v-pre type="text/x-template" id="axis-settings">
+<template>
+  <ve-heatmap :data="chartData" :settings="chartSettings"></ve-heatmap>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['时间', '地点', '人数'],
+        rows: [
+          { '时间': '星期一', '地点': '北京', '人数': 1000 },
+          { '时间': '星期二', '地点': '上海', '人数': 400 },
+          { '时间': '星期三', '地点': '杭州', '人数': 800 },
+          { '时间': '星期二', '地点': '深圳', '人数': 200 },
+          { '时间': '星期三', '地点': '长春', '人数': 100 },
+          { '时间': '星期五', '地点': '南京', '人数': 300 },
+          { '时间': '星期四', '地点': '江苏', '人数': 800 },
+          { '时间': '星期三', '地点': '北京', '人数': 700 },
+          { '时间': '星期三', '地点': '上海', '人数': 300 },
+          { '时间': '星期二', '地点': '杭州', '人数': 500 }
+        ]
+      },
+      this.chartSettings = {
+        xAxisList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
+        yAxisList: ['北京', '上海', '杭州', '深圳', '长春', '南京', '江苏']
+      }
+    }
+  }
+</script>
+</script>
+
+#### 自定义 visualMap
+
+<vuep template="#visualMap-settings"></vuep>
+
+<script v-pre type="text/x-template" id="visualMap-settings">
+<template>
+  <ve-heatmap :data="chartData" :visual-map="chartVisualMap" :grid="chartGrid"></ve-heatmap>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['时间', '地点', '人数'],
+        rows: [
+          { '时间': '星期一', '地点': '北京', '人数': 1000 },
+          { '时间': '星期二', '地点': '上海', '人数': 400 },
+          { '时间': '星期三', '地点': '杭州', '人数': 800 },
+          { '时间': '星期二', '地点': '深圳', '人数': 200 },
+          { '时间': '星期三', '地点': '长春', '人数': 100 },
+          { '时间': '星期五', '地点': '南京', '人数': 300 },
+          { '时间': '星期四', '地点': '江苏', '人数': 800 },
+          { '时间': '星期三', '地点': '北京', '人数': 700 },
+          { '时间': '星期三', '地点': '上海', '人数': 200 },
+          { '时间': '星期二', '地点': '杭州', '人数': 500 }
+        ]
+      },
+      this.chartGrid = {
+        right: 100
+      }
+      this.chartVisualMap = {
+        min: 0,
+        max: 1500,
+        type: 'piecewise',
+        right: 0,
+        top: '50%'
+      }
+    }
+  }
+</script>
+</script>
+
+#### 地图热力图
+
+<vuep template="#map-heatmap"></vuep>
+
+<script v-pre type="text/x-template" id="map-heatmap">
+<template>
+  <ve-heatmap :data="chartData" :settings="chartSettings"></ve-heatmap>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['lat', 'lng', '人数'],
+        rows: [
+          { 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
+          { 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
+          { 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
+          { 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
+          { 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
+          { 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
+          { 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
+          { 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
+          { 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
+          { 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
+        ]
+      }
+      this.chartSettings = {
+        position: 'china',
+        type: 'map',
+        geo: {
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              areaColor: '#323c48',
+              borderColor: '#111'
+            },
+            emphasis: {
+              areaColor: '#2a333d'
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+</script>
+
+
+#### 百度地图热力图
+
+<vuep template="#bmap-heatmap"></vuep>
+
+<script v-pre type="text/x-template" id="bmap-heatmap">
+<template>
+  <ve-heatmap :data="chartData" :settings="chartSettings"></ve-heatmap>
+</template>
+
+<script>
+  module.exports = {
+    created: function () {
+      this.chartData = {
+        columns: ['lat', 'lng'],
+        rows: [
+          { 'lat': 120.14322240845, 'lng': 30.236064370321 },
+          { 'lat': 120.14301682797, 'lng': 30.236035316745 },
+          { 'lat': 120.14138577045, 'lng': 30.236113748704 },
+          { 'lat': 120.1400398833, 'lng': 30.235973050702 },
+          { 'lat': 120.13893453465, 'lng': 30.23517220446 },
+          { 'lat': 120.1382899739, 'lng': 30.234062922977 },
+          { 'lat': 120.13265960629, 'lng': 30.231641351722 },
+          { 'lat': 120.13170681763, 'lng': 30.229925745619 },
+          { 'lat': 120.13119614803, 'lng': 30.228996846637 },
+          { 'lat': 120.13023980134, 'lng': 30.228226570416 }
+        ]
+      }
+      this.chartSettings = {
+        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
+        bmap: {
+          center: [120.14322240845, 30.236064370321],
+          zoom: 14,
+          roam: true
+        },
+        type: 'bmap'
+      }
+    }
+  }
+</script>
+</script>
+
+#### settings 配置项
+
+| 配置项 | 简介 | 类型 | 备注 |
+| --- | --- | --- | --- |
+| type | 热力图的类型 | String | 可选值：`cartesian`(默认值，直角坐标系), `map`(地图)，`bmap`(百度地图) |
+| xAxisList | x 轴数据 | Array | 默认取数据中的数据中的第一维度的数据 |
+| yAxisList | y 轴数据 | Array | 默认取数据中的数据中的第二维度的数据 |
+| dimension | 维度 | Array | 默认为 [columns[0], columns[1]] |
+| metrics | 指标 | String | 默认为 columns[2] |
+| dataType | 数据类型 | String | 可选值: KMB, normal, percent |
+| min | visual 中的最小值 | Number | 默认取指标中最小的数据 |
+| max | visual 中的最大值 | Number | 默认取指标中最大的数据 |
+| digit | 设置数据类型为percent时保留的位数 | Number | 默认为2 |
+| key | 百度地图 access_key | String | 可[由此](http://lbsyun.baidu.com/apiconsole/key)获取 |
+| bmap | 百度地图配置项 | Object | 参考[文档](https://github.com/ecomfe/echarts/tree/master/extension/bmap#使用)配置 |
+| geo |  地图配置项 |  Object | 参考[文档](http://echarts.baidu.com/option.html#geo) |
+| position | 地图类型 | String | 默认为 `'china'` |
+| positionJsonLink | 地图数据源 | String | - |
+| beforeRegisterMap | 地图数据注册前执行的函数 | Function | 参数为地图数据，需返回地图数据 |
+| pointSize | 点大小 | Number | 默认为 10 |
+| blurSize | 模糊大小 | Number | 默认为 5 |
+| heatColor | visual 中的最大值颜色区间 | Array | - |
+| yAxisName | y 轴名称 | String | - |
+| xAxisName | x 轴名称 | String | - |
+
+> 备注：当不指定指标时，指标的值默认为1。
diff --git a/docs/index.html b/docs/index.html
@@ -38,6 +38,7 @@
   <script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
   <script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
   <script src="//unpkg.com/[email protected]/lib/index.js"></script>
+  <script src="//unpkg.com/echarts/dist/extension/bmap.min.js"></script>
   <script src="./index.min.js"></script>
 </body>
 </html>
diff --git a/docs/map.md b/docs/map.md
@@ -238,7 +238,7 @@
 | --- | --- | --- | --- |
 | dimension | 维度 | String | 默认columns第一项为维度 |
 | metrics | 指标 | Array | 默认columns第二项为指标 |
-| position | 地图类型 | String | 默认为 `'china'` |
+| position | 位置 | String | 默认为 `'china'` |
 | selectData | 是否高亮显示数据对应位置 | Boolean | 默认为 `false` |
 | selectedMode | 地图选中模式 | Boolean，String | 默认为 `false`, 可选值有<br>`'single', 'multiple'` |
 | dataType | 指标数据类型 | Object | 内容为 指标-指标数据 <br>类型的键值对，支持<br>`'normal', 'KMB', 'percent'` |

diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -13,6 +13,7 @@
   - [雷达图](/radar)
   - [地图](/map)
   - [桑基图](/sankey)
+  - [热力图](/heatmap)
 - 其他
   - [事件监听](/event)
   - [图表切换](/toggle)

diff --git a/examples/data/heatmap.js b/examples/data/heatmap.js
@@ -0,0 +1,111 @@
+export default {
+  name: '热力图',
+  type: 'heatmap',
+  data: [
+    {
+      name: '简单热力图',
+      data: {
+        columns: ['时间', '地点', '人数'],
+        rows: [
+          { '时间': '星期一', '地点': '北京', '人数': 1000 },
+          { '时间': '星期二', '地点': '上海', '人数': 400 },
+          { '时间': '星期三', '地点': '杭州', '人数': 800 },
+          { '时间': '星期二', '地点': '深圳', '人数': 200 },
+          { '时间': '星期三', '地点': '长春', '人数': 100 },
+          { '时间': '星期五', '地点': '南京', '人数': 300 },
+          { '时间': '星期四', '地点': '江苏', '人数': 800 },
+          { '时间': '星期一', '地点': '北京', '人数': 700 },
+          { '时间': '星期三', '地点': '上海', '人数': 300 },
+          { '时间': '星期二', '地点': '杭州', '人数': 500 }
+        ]
+      }
+    },
+    {
+      name: '配置坐标轴显示内容',
+      data: {
+        columns: ['时间', '地点', '人数'],
+        rows: [
+          { '时间': '星期一', '地点': '北京', '人数': 1000 },
+          { '时间': '星期二', '地点': '上海', '人数': 400 },
+          { '时间': '星期三', '地点': '杭州', '人数': 800 },
+          { '时间': '星期二', '地点': '深圳', '人数': 200 },
+          { '时间': '星期三', '地点': '长春', '人数': 100 },
+          { '时间': '星期五', '地点': '南京', '人数': 300 },
+          { '时间': '星期四', '地点': '江苏', '人数': 800 },
+          { '时间': '星期三', '地点': '北京', '人数': 700 },
+          { '时间': '星期三', '地点': '上海', '人数': 300 },
+          { '时间': '星期二', '地点': '杭州', '人数': 500 }
+        ]
+      },
+      settings: {
+        xAxisList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
+        yAxisList: ['北京', '上海', '杭州', '深圳', '长春', '南京', '江苏']
+      }
+    },
+    {
+      name: '地图+热力图',
+      data: {
+        columns: ['lat', 'lng', '人数'],
+        rows: [
+          { 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
+          { 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
+          { 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
+          { 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
+          { 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
+          { 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
+          { 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
+          { 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
+          { 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
+          { 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
+        ]
+      },
+      settings: {
+        position: 'china',
+        type: 'map',
+        geo: {
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              areaColor: '#323c48',
+              borderColor: '#111'
+            },
+            emphasis: {
+              areaColor: '#2a333d'
+            }
+          }
+        }
+      }
+    },
+    {
+      name: '百度地图+热力图',
+      data: {
+        columns: ['lat', 'lng'],
+        rows: [
+          { 'lat': 120.14322240845, 'lng': 30.236064370321 },
+          { 'lat': 120.14301682797, 'lng': 30.236035316745 },
+          { 'lat': 120.14138577045, 'lng': 30.236113748704 },
+          { 'lat': 120.1400398833, 'lng': 30.235973050702 },
+          { 'lat': 120.13893453465, 'lng': 30.23517220446 },
+          { 'lat': 120.1382899739, 'lng': 30.234062922977 },
+          { 'lat': 120.13265960629, 'lng': 30.231641351722 },
+          { 'lat': 120.13170681763, 'lng': 30.229925745619 },
+          { 'lat': 120.13119614803, 'lng': 30.228996846637 },
+          { 'lat': 120.13023980134, 'lng': 30.228226570416 }
+        ]
+      },
+      settings: {
+        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
+        bmap: {
+          center: [120.14322240845, 30.236064370321],
+          zoom: 14,
+          roam: true
+        },
+        type: 'bmap'
+      }
+    }
+  ]
+}