Q-Flyline 飞线图

参考地图具体示例 (opens new window)

基本示例

<template>
  <div style="height: 800px;width: 100%;">
    <QFlyline></QFlyline>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>

Expand Copy Copy

进阶示例

<template>
  <div style="height: 800px;width: 100%;">
    <QFlyline :region-code="regionCode" :options="options"></QFlyline>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        regionCode: '360800',
        options: {
          geo: {
            // 鼠标滚轮缩放是否开启
            roam: false,
            // 地图大小
            zoom: 1.2,
            // 地图省市县等名字标签
            label: {
              // 是否显示
              show: true,
              // 颜色
              color: 'white',
              // 字体大小
              fontSize: 14
            },
            itemStyle: {
              // 地图区域颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'skyblue' // 颜色起点
                }, {
                  offset: 1, color: 'blue' // 颜色终点
                }],
                global: false // 是否为全局渐变
              },
              // 整个地图透明度
              opacity: 0.8
            },
            //地图高亮的效果
            emphasis: {
              itemStyle: {
                // 高亮时的颜色
                color: 'skyblue'
              },
              label: {
                // 高亮时标签的字体大小
                fontSize: 20
              }
            },
          },
          //布局位置
          grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
          },
          series: [
            {
              type: 'lines',//航线的系列
              data: [
                {
                  coords: [
                    [114.631956, 27.394664],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.928488, 27.031046],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [115.134775, 27.203451],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.276951, 26.750422],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.596977, 26.408992],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.877507, 26.798585],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.779549, 26.463215],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [115.316527, 27.585291],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [115.37787917, 27.72986854],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [115.412249, 27.314916],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
                {
                  coords: [
                    [114.236245, 26.955913],  // 起点
                    [115.013139, 27.091188]   // 终点

                  ],
                  // 统一的样式设置
                  lineStyle: {
                    color: 'skyblue',
                    width: 2
                  }
                },
              ],
              //开启动画特效
              effect: {
                // 是否显示动画效果
                show: true,
                // 动画的图形符号
                symbol: 'arrow',
                // 动画符号的颜色
                color: 'black',
                // 动画符号的大小
                symbolSize: 7
              }
            }
          ]
        }

      }
    },
  }
</script>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
regionCode	区域代码	String	360800 / 350700	360800
options	环半径（动态）	Object	options 属性	{}
regionData	地图数据	Object	GeoJson (opens new window)	——

options 属性

参考官网ECharts 文档 (opens new window)，或者看进阶示例注释。