echarts 地图流向图的实现方法

代码搬运媛

已于 2023-06-09 10:22:11 修改

阅读量1.7k

点赞数 1

分类专栏： VUE专栏文章标签： echarts javascript 前端

于 2023-02-14 17:31:17 首次发布

本文链接：https://blog.csdn.net/sinat_33255495/article/details/129030688

版权

VUE专栏专栏收录该内容

63 篇文章 5 订阅

订阅专栏

关键代码：

主要在 series 数据格式：

series: [
		// 流向线条
            {
              name: '保定',
              type: "lines",
              zlevel: 1,
              symbol: ["none", "arrow"],
              effect: {
                  show: true,
                  period: 6, // 速度
                  trailLength: 0, // 特效拖尾
                  symbol: "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",  // 图标形状，这里是小飞机
                  symbolSize: 15
              },
              lineStyle: {
                  color: "#fdc631",
                  width: 1,
                  curveness: 0.2
              },
              data: [
                {
                  coords: [
                    [121.4648, 31.2891], // 流出位置
                    [115.655772, 39.018781] // 流入位置
                  ]
                },
                {
                  coords: [
                    [106.550483, 29.563707],
                    [115.655772, 39.018781],
                  ]
                }
              ]
            },
            // 地图上的点
            {
              name: "保定",
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                show: true,
                position: "right",
                formatter: "{b}"
              },
              itemStyle: {
                color: "#fdc631",
                symbolSize: 10
              },
              data: [
                {
                  "name": "保定",
                  "value": [
                        115.655772,
                        39.018781 
                  ]
                },
                {
                  "name": "重庆",
                  "value": [
                    106.550483,
                    29.563707,
                  ]
                },
                {
                    "name": "上海",
                    "value": [
                      121.4648,
                      31.2891,
                    ]
                },
                {
                  "name": "广州",
                  "value": [
                        113.5107,
                        23.2196,
                  ]
                }
              ]
            }
          ]

完整配置代码

options = {
	backgroundColor: "#000079",
          geo: {
            map: "china",
            itemStyle: {
              normal: {
                  borderWidth: 1,
                  areaColor: "#0e2770",
                  borderColor: "#3AD7FF",
                  shadowBlur: 2,
                  shadowColor: "#3AA5FF",
              },
            },
            emphasis: {
              color: "#fff",
              areaColor: "#032654",
            },
          },
          series: [
            {
              type: "lines",
              zlevel: 1,
              symbol: ["none", "arrow"],
              effect: {
                  show: true,
                  period: 6,
                  trailLength: 0,
                  symbol: "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
                  symbolSize: 15
              },
              lineStyle: {
                  color: "#fdc631",
                  width: 1,
                  curveness: 0.2
              },
              data: [
                {
                  coords: [
                    [121.4648, 31.2891], // 流出位置
                    [115.655772, 39.018781] // 流入位置
                  ]
                },
                {
                  coords: [
                    [106.550483, 29.563707],
                    [115.655772, 39.018781],
                  ]
                }
              ]
            },
            // 地图上的点
            {
              name: "保定",
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                show: true,
                position: "right",
                formatter: "{b}"
              },
              itemStyle: {
                color: "#fdc631",
                symbolSize: 10
              },
              data: [
                {
                  "name": "保定",
                  "value": [
                        115.655772,
                        39.018781 
                  ]
                },
                {
                  "name": "重庆",
                  "value": [
                    106.550483,
                    29.563707,
                  ]
                },
                {
                    "name": "上海",
                    "value": [
                      121.4648,
                      31.2891,
                    ]
                },
                {
                  "name": "广州",
                  "value": [
                        113.5107,
                        23.2196,
                  ]
                }
              ]
            }
          ]
}