Merge pull request #120 from vueblocks/develop

Develop
vueblocks · Jul 31, 2020 · fd246d8 · fd246d8
2 parents 3601b20 + ef3d395
commit fd246d8
Show file tree

Hide file tree

Showing 10 changed files with 801 additions and 135 deletions.
diff --git a/app/data/geo.js b/app/data/geo.js
@@ -70,6 +70,20 @@ const baseData = {
   ]
 }
 
+const geolinesData = {
+  measures: [
+    {
+      name: '北京',
+      data: [
+        { name: '上海', value: randomData() },
+        { name: '齐齐哈尔市', value: randomData() },
+        { name: '西宁市', value: randomData() },
+        { name: '昆明市', value: randomData() }
+      ]
+    }
+  ]
+}
+
 export default {
   name: '地图',
   type: 'geo',
@@ -127,6 +141,59 @@ export default {
         mapUrlPrefix: 'https://raw.githubusercontent.com/pissang/starbucks/gh-pages/json/',
         mapName: 'USA'
       }
+    },
+    {
+      title: '飞线地图',
+      data: geolinesData,
+      settings: {
+        mode: 'lines',
+        lineStyle: {
+          color: '#ED3574',
+          width: 1,
+          opacity: 0.6,
+          curveness: 0.2
+        },
+        lineEffectVisible: false,
+        lineEffect: {
+          period: 0,
+          trailLength: 0,
+          color: '#fff',
+          symbolSize: 3
+        },
+        overlayEffectVisible: true,
+        overlayEffect: {
+          period: 5,
+          trailLength: 0.4,
+          symbol: 'arrow',
+          symbolSize: 6
+        },
+        effectScatterLabelVisible: true,
+        effectScatterLabel: {
+          normal: { position: 'left' }
+        },
+        visualMapVisible: true,
+        visualMap: {
+          inRange: {
+            color: [ '#C6FFDD', '#FBD786', '#f7797d' ]
+          }
+        },
+        symbolSize: 10,
+        itemStyle: {
+          normal: {
+            areaColor: '#020933',
+            borderColor: '#3fdaff',
+            borderWidth: 1,
+            shadowColor: 'rgba(63, 218, 255, 0.5)',
+            shadowBlur: 10
+          },
+          emphasis: {
+            areaColor: '#2B91B7'
+          }
+        }
+      },
+      xprops: {
+        legendVisible: false
+      }
     }
   ]
 }
diff --git a/app/views/TestEvent.vue b/app/views/TestEvent.vue
@@ -91,7 +91,7 @@ export default {
         mapName: 'china',
         visualMapVisible: true,
         visualMap: {
-          inRange: { color: ['#ee0979', '#ff6a00'] },
+          inRange: { color: ['#4af', '#1ea'] },
           textStyle: {
             color: '#fff'
           }
@@ -112,7 +112,7 @@ export default {
         label: {
           normal: {
             show: true,
-            color: '#00ff00',
+            color: '#1af',
             fontSize: 13
           },
           emphasis: {

diff --git a/docs/change-log.md b/docs/change-log.md
@@ -1,5 +1,10 @@
 # 更新日志
 
+## v0.9.0
+
+* **新增** - [飞线地图](https://vueblocks.github.io/ve-charts/#/chart-geo?id=地图-飞线效果图)
+* **更新** - `resize-detector` 升级至 v0.2.2
+
 ## v0.8.8
 
 * **优化** - 柱状图增加新增X轴和Y轴反向属性设置

diff --git a/docs/chart-geo.md b/docs/chart-geo.md
@@ -456,6 +456,88 @@ module.exports = {
 }
 </script>
 
+## 地图 + 飞线效果图
+
+> 飞线图可以在地图上展现运动轨迹，可以用于展示不同地点之间的关系
+
+<vuep template="#linesGeo" :options="{ theme: 'vue', lineNumbers: false }"></vuep>
+
+<script v-pre type="text/x-template" id="linesGeo">
+
+<template>
+  <ve-geo-chart :data="chartData" :settings="chartSettings" :legend-visible="false" />
+</template>
+
+<script>
+const randomData = () => {
+  return Math.round(Math.random() * 1000)
+}
+
+module.exports = {
+  created () {
+    this.chartData = {
+      measures: [
+        {
+          name: '北京',
+          data: [
+            { name: '上海', value: randomData() },
+            { name: '齐齐哈尔市', value: randomData() },
+            { name: '西宁市', value: randomData() },
+            { name: '昆明市', value: randomData() }
+          ]
+        }
+      ]
+    }
+    this.chartSettings = {
+      mode: 'lines',
+      lineStyle: {
+        color: '#ED3574',
+        width: 1,
+        opacity: 0.6,
+        curveness: 0.2
+      },
+      lineEffectVisible: false,
+      lineEffect: {
+        period: 0,
+        trailLength: 0,
+        color: '#fff',
+        symbolSize: 3
+      },
+      overlayEffectVisible: true,
+      overlayEffect: {
+        period: 5,
+        trailLength: 0.4,
+        symbol: 'arrow',
+        symbolSize: 6
+      },
+      effectScatterLabelVisible: true,
+      effectScatterLabel: {
+        normal: { position: 'left' }
+      },
+      visualMapVisible: true,
+      visualMap: {
+        inRange: {
+          color: [ '#C6FFDD', '#FBD786', '#f7797d' ]
+        }
+      },
+      symbolSize: 10,
+      itemStyle: {
+        normal: {
+          areaColor: '#020933',
+          borderColor: '#3fdaff',
+          borderWidth: 1,
+          shadowColor: 'rgba(63, 218, 255, 0.5)',
+          shadowBlur: 10
+        },
+        emphasis: {
+          areaColor: '#2B91B7'
+        }
+      }
+    }
+  }
+}
+</script>
+
 ## 地图下钻
 
 <vuep template="#insideGeo" :options="{ theme: 'vue', lineNumbers: false }"></vuep>
@@ -573,7 +655,7 @@ module.exports = {
       mapName: 'china',
       visualMapVisible: true,
       visualMap: {
-        inRange: { color: ['#ee0979', '#ff6a00'] },
+        inRange: { color: ['#4af', '#1ea'] },
         textStyle: {
           color: '#fff'
         }
@@ -594,7 +676,7 @@ module.exports = {
       label: {
         normal: {
           show: true,
-          color: '#00ff00',
+          color: '#1af',
           fontSize: 13
         },
         emphasis: {
@@ -735,7 +817,7 @@ module.exports = {
 
 | 配置项 | 简介 | 类型 | 用法 |
 | --- | --- | --- | --- |
-| mode | geo地图支持不同的模式 | String | 默认为 `map`，可选 `scatter`、`effectScatter`、`heatmap` |
+| mode | geo地图支持不同的模式 | String | 默认为 `map`，可选 `scatter`、`effectScatter`、`heatmap`、`lines`|
 | mapName | 地图名称 | String | 默认为 `china`，中国地图可选 `china-cities`、`china-contour`、`province/beijing`，可传入自定义地图名称 |
 | mapUrlPrefix | 地图链接前缀 | String | 默认为 `https://unpkg.com/echarts@4.1.0/map/json/`，可传入自定义地址 |
 | visualMapVisible | 视觉映射开关 | Boolean | 默认为 `false`，可选 `true` |
@@ -746,6 +828,14 @@ module.exports = {
 | roam | 是否开启鼠标缩放和平移漫游 | [Boolean, String] | 默认为 `false` 可以设置成 `scale` 或者 `move`。设置成 `true` 为都开启 |
 | zoom | 当前视角的缩放比例 | Number | 默认为 `1` |
 | symbolSize | 散点图标记的大小 | number, Array, Function | 参见[文档](https://echarts.baidu.com/option.html#series-scatter.symbolSize) |
+| lineStyle | 线样式配置 | Object | 参见[文档](https://echarts.apache.org/zh/option.html#series-lines.lineStyle) |
+| lineEffectVisible | 线特效开关 | Boolean | 默认为 `false`，可选 `true` |
+| lineEffect | 线特效配置 | Object | 参见[文档](https://echarts.apache.org/zh/option.html#series-lines.effect) |
+| overlayEffectVisible | overlay 特效开关 | Boolean | 默认为 `true`，可选 `false` |
+| overlayEffect | overlay 特效配置 | Object | 参见[文档](https://echarts.apache.org/zh/option.html#series-lines.effect) |
+| effectScatterLabelVisible | effectScatter 图形文本标签开关 | Boolean | 默认为 `false`，可选 `true` |
+| effectScatterLabel | effectScatter 图形文本标签 | Object | 参见[文档](https://echarts.apache.org/zh/option.html#series-lines.label) |
+
 
 > Tip1: mode 为非 map 时，使用 `coordinateSystem` 配置地理坐标系为 `geo` 生成地图