Echarts飞线图demo

于 2024-07-22 15:56:57 发布
阅读量263 收藏
点赞数 1
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amber_1210/article/details/140611291
版权

公司大屏项目需要完成一个含有飞线图功能的地图，经过查询资料借鉴，写了一个区的demo

1、准备数据,因为我是画的区县地图，所以得自己去找数据

经纬度数据获取：https://lbs.amap.com/tools/picker

//地图数据
      var chinaGeoCoordMap = {
        '龙岗街道': [105.71, 29.70],
        '龙滩子街道': [105.79, 29.49],
        '双路街道': [105.77, 29.49],
        '通桥街道': [105.77, 29.52],
        '智凤街道': [105.79, 29.65],
        '龙水镇': [105.77, 29.56],
        '邮亭镇': [105.74, 29.43],
        '宝顶镇': [105.76, 29.75],
        '万古镇': [105.94, 29.68],
        '珠溪镇': [105.67, 29.54],
        '中敖镇': [105.67, 29.76],
        '三驱镇': [105.62, 29.63],
        '石马镇': [105.83, 29.63],
        '雍溪镇': [105.99, 29.74],
        '玉龙镇': [105.82, 29.54],
        '宝兴镇': [105.70, 29.62],
        '拾万镇': [105.90, 29.61],
        '铁山镇': [105.57, 29.69],
        '回龙镇': [105.87, 29.73],
        '国梁镇': [105.93, 29.76],
        '金山镇': [105.89, 29.66],
        '高升镇': [105.58, 29.72],
        '季家镇': [105.54, 29.63],
        '龙石镇': [105.62, 29.56],
        '高坪镇': [105.67, 29.84],
        '古龙镇': [106.01, 29.70],
      }

      //飞线点数据
      var chinaDatas = [
        [{name: '龙岗街道', value: 0}],
        [{name: '龙滩子街道', value: 0}],
        [{name: '双路街道', value: 0}],
        [{name: '通桥街道', value: 0}],
        [{name: '智凤街道', value: 0}],
        [{name: '龙水镇', value: 0}],
        [{name: '邮亭镇', value: 0}],
        [{name: '宝顶镇', value: 0}],
        [{name: '万古镇', value: 0}],
        [{name: '珠溪镇', value: 0}],
        [{name: '中敖镇', value: 0}],
        [{name: '三驱镇', value: 0}],
        [{name: '石马镇', value: 0}],
        [{name: '雍溪镇', value: 0}],
        [{name: '玉龙镇', value: 0}],
        [{name: '宝兴镇', value: 0}],
        [{name: '拾万镇', value: 0}],
        [{name: '铁山镇', value: 0}],
        [{name: '回龙镇', value: 0}],
        [{name: '国梁镇', value: 0}],
        [{name: '金山镇', value: 0}],
        [{name: '高升镇', value: 0}],
        [{name: '季家镇', value: 0}],
        [{name: '龙石镇', value: 0}],
        [{name: '高坪镇', value: 0}],
        [{name: '古龙镇', value: 0}],

      ]

2、绘制地图

geo: [{
          map: 'dazu',
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "50%"],
          layoutSize: "180%",
          roam: false, //是否允许缩放
          show: true,
          silent: true, //鼠标移入区域变色 如果设置为true则无法高亮
          emphasis: {
            label: {
              show: false,
            },
          },
          itemStyle: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.9,
              colorStops: [{
                offset: 0,
                color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
              }],
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            shadowColor: "#8cd3ef",
            shadowOffsetY: 10,
            shadowBlur: 120,
          },
        },
          // 重影
          {
            type: "map",
            map: "dazu",
            zlevel: -1,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "51%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "52%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",

            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "53%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "54%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        ],

3、确定飞线图的中心点位

 let formdata = '龙岗街道' // 中心点

4、确定飞线图的样式

[[formdata, chinaDatas]].forEach(function (item, i) {
        series.push(
            {
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 6, //图标大小
                color: '#fcdd6e', // 图标颜色
              },
              lineStyle: {
                width: 2, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
                color: '#fcdd6e', // 飞线颜色
                shadowBlur: 10
              },
              data: convertData(item[1]),
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 3, //波纹圆环最大限制，值越大波纹越大
                color: '#fcdd6e',
              },
              label: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                color: '#fff',//标签颜色
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.name
                },
                fontSize: 12,
              },
              emphasis: {
                label: {
                  show: false,
                }
              },
              symbol: 'circle',
              symbolSize: function (val) {
                return 10//圆环大小
              },
              itemStyle: {
                show: false,
                color: '#fce182',
              },
              data: item[1].map(function (dataItem) {
                return {
                  //在这里定义你所要展示的数据
                  name: dataItem[0].name,
                  value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                }
              }),
            },
            //中心点
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 15,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4,
                color: '#38ff85',
              },
              label: {
                show: false,
                position: 'right',
                //offset:[5, 0],
                color: '#38ff85',
                formatter: '{b}',
              },
              emphasis: {
                label: {
                  show: false,
                  color: '#38ff85',
                }
              },
              symbol: 'circle',
              symbolSize: 5,
              itemStyle: {
                color: '#38ff85',
              },
              data: [
                {
                  name: item[0],
                  value: chinaGeoCoordMap[item[0]].concat([10]),
                },
              ],
            }
        )
      })

完整代码：

<template>
  <div id="mapChart" ref="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>

<script>

import 'echarts/lib/chart/map'
import dazu from '@/utils/DaZu.json'

export default {
  data() {
    return {
      myChart: '',

    }
  },
  created() {
    this.$echarts.registerMap('dazu', dazu)
  },
  mounted() {

    this.$nextTick(_ => {
      this.initMapInfo()

    })


  },
  methods: {
    initMapInfo() {

      //地图数据
      var chinaGeoCoordMap = {
        '龙岗街道': [105.71, 29.70],
        '龙滩子街道': [105.79, 29.49],
        '双路街道': [105.77, 29.49],
        '通桥街道': [105.77, 29.52],
        '智凤街道': [105.79, 29.65],
        '龙水镇': [105.77, 29.56],
        '邮亭镇': [105.74, 29.43],
        '宝顶镇': [105.76, 29.75],
        '万古镇': [105.94, 29.68],
        '珠溪镇': [105.67, 29.54],
        '中敖镇': [105.67, 29.76],
        '三驱镇': [105.62, 29.63],
        '石马镇': [105.83, 29.63],
        '雍溪镇': [105.99, 29.74],
        '玉龙镇': [105.82, 29.54],
        '宝兴镇': [105.70, 29.62],
        '拾万镇': [105.90, 29.61],
        '铁山镇': [105.57, 29.69],
        '回龙镇': [105.87, 29.73],
        '国梁镇': [105.93, 29.76],
        '金山镇': [105.89, 29.66],
        '高升镇': [105.58, 29.72],
        '季家镇': [105.54, 29.63],
        '龙石镇': [105.62, 29.56],
        '高坪镇': [105.67, 29.84],
        '古龙镇': [106.01, 29.70],
      }

      //飞线点数据
      var chinaDatas = [
        [{name: '龙岗街道', value: 0}],
        [{name: '龙滩子街道', value: 0}],
        [{name: '双路街道', value: 0}],
        [{name: '通桥街道', value: 0}],
        [{name: '智凤街道', value: 0}],
        [{name: '龙水镇', value: 0}],
        [{name: '邮亭镇', value: 0}],
        [{name: '宝顶镇', value: 0}],
        [{name: '万古镇', value: 0}],
        [{name: '珠溪镇', value: 0}],
        [{name: '中敖镇', value: 0}],
        [{name: '三驱镇', value: 0}],
        [{name: '石马镇', value: 0}],
        [{name: '雍溪镇', value: 0}],
        [{name: '玉龙镇', value: 0}],
        [{name: '宝兴镇', value: 0}],
        [{name: '拾万镇', value: 0}],
        [{name: '铁山镇', value: 0}],
        [{name: '回龙镇', value: 0}],
        [{name: '国梁镇', value: 0}],
        [{name: '金山镇', value: 0}],
        [{name: '高升镇', value: 0}],
        [{name: '季家镇', value: 0}],
        [{name: '龙石镇', value: 0}],
        [{name: '高坪镇', value: 0}],
        [{name: '古龙镇', value: 0}],

      ]

      let formdata = '龙岗街道' // 中心点

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = chinaGeoCoordMap[dataItem[0].name]
          var toCoord = [105.71, 29.70] //中心点地理坐标
          if (fromCoord && toCoord) {
            res.push([
              {
                // 飞线从哪里出发
                coord: toCoord,
              },
              {
                // 飞线去往哪里
                coord: fromCoord,
                value: dataItem[0].value,
              },
            ])
          }
        }
        return res
      }

      var series = [];
      [[formdata, chinaDatas]].forEach(function (item, i) {
        series.push(
            {
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 6, //图标大小
                color: '#fcdd6e', // 图标颜色
              },
              lineStyle: {
                width: 2, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
                color: '#fcdd6e', // 飞线颜色
                shadowBlur: 10
              },
              data: convertData(item[1]),
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 3, //波纹圆环最大限制，值越大波纹越大
                color: '#fcdd6e',
              },
              label: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                color: '#fff',//标签颜色
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.name
                },
                fontSize: 12,
              },
              emphasis: {
                label: {
                  show: false,
                }
              },
              symbol: 'circle',
              symbolSize: function (val) {
                return 10//圆环大小
              },
              itemStyle: {
                show: false,
                color: '#fce182',
              },
              data: item[1].map(function (dataItem) {
                return {
                  //在这里定义你所要展示的数据
                  name: dataItem[0].name,
                  value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                }
              }),
            },
            //中心点
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 15,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4,
                color: '#38ff85',
              },
              label: {
                show: false,
                position: 'right',
                //offset:[5, 0],
                color: '#38ff85',
                formatter: '{b}',
              },
              emphasis: {
                label: {
                  show: false,
                  color: '#38ff85',
                }
              },
              symbol: 'circle',
              symbolSize: 5,
              itemStyle: {
                color: '#38ff85',
              },
              data: [
                {
                  name: item[0],
                  value: chinaGeoCoordMap[item[0]].concat([10]),
                },
              ],
            }
        )
      })
      this.initMap(series)
    },

    initMap(series) {
      this.myChart = this.$echarts.init(document.getElementById('mapChart'))
      let option = {
        // bgColor: '#1a1e45',
        tooltip: {
          trigger: 'item',
          backgroundColor: '#fff',
          label: {
            color: '#000',
          },
          formatter: function (params) {
            // console.log(params)
            var tipHtml = ''
            tipHtml = `
                        <div class="ui-map-img">
                            <div class='ui-maptxt'>${params.name}</div>
                        </div>
                    `
            return tipHtml
          }
        },
        legend: {
          orient: 'horizontal', //图例的排列方向
          x: 'left', //图例的位置
          y: '-20000000000000',
        },
        visualMap: {
          //颜色的设置  dataRange
          x: 'left',
          y: 'bottom',
          show: false,
        },
        geo: [{
          map: 'dazu',
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "50%"],
          layoutSize: "180%",
          roam: false, //是否允许缩放
          show: true,
          silent: true, //鼠标移入区域变色 如果设置为true则无法高亮
          emphasis: {
            label: {
              show: false,
            },
          },
          itemStyle: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.9,
              colorStops: [{
                offset: 0,
                color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
              }],
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            shadowColor: "#8cd3ef",
            shadowOffsetY: 10,
            shadowBlur: 120,
          },
        },
          // 重影
          {
            type: "map",
            map: "dazu",
            zlevel: -1,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "51%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "52%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",

            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "53%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
          {
            type: "map",
            map: "dazu",
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "54%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        ],
        series: series,
      }
      this.myChart.setOption(option)
    
    },
  }

}
</script>

<style lang="less" scoped>
#mapChart {
  height: 100%;
}
</style>

是阿奕
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
echarts中国地图飞线图demo
热门推荐
old_black的博客
08-11 1万+
因为公司要做大屏，需要用到echarts的地图功能，并且要添加飞线功能，在网上查了下资料，翻阅了一下官方文档后，终于是实现出来了 直接上代码 <template> <div class="container" id="container" style="z-index: 1"></div> </template> <scprit> import '' export detault { data:{}, mounted
echarts 地图，3D echarts地图，echarts飞线，echarts福建地图
u014712103的博客
04-30 2691
闲来无事帮大家研究了一下echart的地图，写了几个福建的demo，有打点、飞线、飞线发射点的切换、下钻、3D、2D的实现请各位大神指正，demo入下图所示 ...
Vue+Echarts 实现中国地图和飞线效果
彭世瑜的博客
04-24 1195
/ 设置图块颜色，也可以通过图例 visualMap 设置颜色，但是飞线的颜色设置会失效，一直取 图例 设置的颜色；源码地址：https://github.com/mouday/vue-demo。高版本的echarts，不包含地图数据，需要自己下载到项目中。// 默认样式，图块没数据时，会取默认颜色。// 尾迹长度[0,1]值越大，尾迹越长。// 动画样式 fill stroke。// 图标飞跃速度，值越小速度越快。主要有3个部分：地图、线条、点。// 事件监听工具类。//动态改变图表尺寸。
echarts飞线图
Agoni_lxh的博客
08-18 4354
在可视化大屏中碰到要绘制飞线图的需求，采用Echarts来实现，但是Echarts的世界地图数据会缺失部分数据，引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢，体验感极差；最终通过改造Echarts地图数据实现了如下效果:详细代码如下。...
echarts制作中国地图飞行线
u011233151的博客
04-08 2119
echarts制作中国地图飞行线
ECharts实现地图飞线
最新发布
六六的小帅的博客
05-17 800
v5.x.x版本：不提供china.js和china.json文件v4.x.x版本：使用npm安装echarts，默认包含china.js和china.json文件。
vue中利用Echarts实现飞线（飞机）地图样式
qq_44727672的博客
08-25 2916
vue中利用Echarts实现飞线地图样式
ECharts 地图
04-03
- 专题图：ECharts 提供了专题图插件，可以制作热力图、流向图等复杂地图效果，增强数据的表达能力。 - 与其他组件结合：ECharts 地图可以与表格、时间轴等其他组件结合，创建复杂的可视化仪表板。 6. **优化与...
DEJA_VU3D - Cesium功能集 之 036-飞线图（发散）
总得学点什么的博客
05-21 1337
这篇文章我们来介绍基于Cesium实现飞线图（发散）的绘制，并支持鼠标点击获取数据和参数。包括完整源代码奉上
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
Ancecis的博客
06-25 7468
总体介绍 最近由于工作室项目需要做一个数据可视化平台，这个平台最终是交由国外人使用的。所以需要使用到google map来实现。因为之前用过AMap + echarts实现数据可视化，所以觉得做这个项目是洒洒水得啦。但是当真正做起来才发现坑有点小大。坑主要在于迁徙图的实现。因为这个项目是合作项目，在谈需求的时候，双方商业互夸后，然后谈到迁徙图。问道这个这个项目的迁徙图和普通的迁徙图的有什么区别。老...
echarts应用openlayers地图,黑客攻击（迁移）Demo
xuerwang的博客
08-15 3486
先上效果图   echarts用openlayers做底图，左侧可以根据选择级别进行显示，，，，，，，当然这不是我做的，虽然与设计图不符，但是效果这么好，记录一下，以备不时之需。 步骤一：npm install openlayers_echart; 步骤二：import ADLayer from ‘openlayers_echart’ 步骤三：var oe = new ADLayer(...
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
weixin_29480231的博客
01-14 750
前言此系列共分为以下几篇《vue中高德地图的使用》《vue中基于高德的多行政区域覆盖》《vue中高德搭配echarts做数据迁徙流线图》 (本篇)本篇效果流线迁徙.gif实现步骤1. 思路分析第一篇的基础讲解，加上上一片的行政区域行政区域展示(描边及背景)，其实可以完成很多炫酷效果了。本篇讲述系列篇的最后一篇：vue中高德搭配echarts做数据迁徙流线图。由于流线图使用的曲线是贝塞尔曲线，而在高...
百度地图 - 使用Echarts绘制飞线图
小小的前端
02-14 5889
简介 为了更好的理解Echarts，把配置项看完是有必要的。但是看完了也不一定记得住，比如说我。一天看一些，当看完后觉得Echarts好强大。然后除了觉得Echarts强大外，其他的基本忘了。所以动手写一些DEMO也是很有必要的。下面来了解一下如何在地图上使用Echarts绘制飞线图。 引入 Api 通过<script>标签引入地图api地址、echarts地址、扩展插件地址，这里的ak是你在地图服务中心注册的。不了解ak的点击 这里 。不了解地图扩展插件的点击 这里 。 <!--
Echarts 飞线图
weixin_44089726的博客
05-19 1210
Echarts 飞线 地图
echarts地图飞线和锚点以及轮播
xiuxialala的博客
01-05 1403
【代码】地图飞线和锚点以及轮播。
echarts实现地图飞线
weixin_42475867的博客
05-12 4977
echarts实现地图飞线echarts画地图 echarts画地图 由于地图需要省市区经纬度，需要geoJSON数据，我们使用aliyun官方的JSON数据，以中国地图为例（链接: link.）。可以将返回的JSON数据写入到util文件夹下的json文件中。 在使用的页面引入该json文件 import china from '../../util/geoJSON/china.json' //根据实际路径引入 eventMap() { let hotEventMap = this.$e
echarts 飞线图
10-29
Echarts 飞线图是一种可视化图表，用于展示地理位置之间的关系和流向。它通过连线的方式，将不同地点之间的关系可视化，可以用于展示人口迁移、货物流向等信息。飞线图的连线可以根据数据的大小和方向进行调整，使得图表更加直观易懂。 在 Echarts 中，飞线图可以通过设置 series 类型为 "lines" 来实现。同时，可以通过设置数据中的起点和终点坐标、线条颜色和宽度等属性来调整图表的样式。此外，Echarts 还支持对飞线图进行交互操作，例如鼠标悬停时显示详细信息等。 总之，Echarts 飞线图是一种非常实用的可视化工具，可以帮助我们更好地理解地理位置之间的关系和流向。如果你需要展示这方面的数据，可以考虑使用 Echarts 飞线图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值