2020-09-02航空航线分布图可做智慧大屏使用

最新推荐文章于 2022-06-07 17:06:10 发布

李大海的幸福生活

最新推荐文章于 2022-06-07 17:06:10 发布

阅读量896

点赞数 1

文章标签： css javascript

本文链接：https://blog.csdn.net/LIdahai_daylife/article/details/108361161

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="js/rem.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>河北航空航线</title>
</head>

<body>
    <div class="container-flex" tabindex="0" hidefocus="true">

<!-- 加航线数据-->
        <div id="container">
            <div>
                <div id="main" style="width: 100vw;height: 100vh"></div>
            </div>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
        <script src="https://gallerybox.echartsjs.com/dep/echarts/map/js/china.js"></script>
        <script>
		
		

    var myChart = echarts.init(
      document.getElementById('main')
    )

    var geoCoordMap = {
      '西宁/曹家堡': [102.046712, 36.53521],
      "广州/白云": [113.314282, 23.395352],
      '南京/禄口': [118.871181,31.731634],
	  '北海/福成': [109.29 ,21.54],
	  '西安/咸阳': [108.764882,34.438179],
	  '绵阳/南郊': [104.749306,31.42671],
	  '杭州/萧山': [120.432414,30.234708],
	  '满洲里/西郊': [117.385436,49.604099],
	  '成都/双流': [103.951229,30.559807],
	  '深圳/宝安': [113.814829,22.633092],
	  '大兴': [116.429172,39.510561],
	  '石家庄/正定': [114.698493,38.280519],
	  '乌鲁木齐/地窝堡': [87.487028,43.912386],
	  '昆明/长水': [102.935615,25.102871],
	  '拉斯/贡嘎': [90.918706,29.299495],
      '鄂尔多斯': [109.873094,39.502016],
      '大连/周水子':  [121.549576,38.969369],
      '桂林/两江':   [110.054552,25.223563],
      '台湾/桃园':   [121.237049,25.081115]
    }

    var data = [
      { name: '西宁/曹家堡', value: 180 },
      { name: "广州/白云", value: 180 },
      { name: "南京/禄口", value: 180 },
	  { name: '北海/福成', value: 180 },
      { name: '西安/咸阳',value: 180 },
      { name: '绵阳/南郊',value: 180 },
	  { name: '杭州/萧山', value: 180 },
      { name: '满洲里/西郊',value: 180 },
      { name: '成都/双流',value: 180 },
	  { name: '深圳/宝安', value: 180 },
      { name: '大兴',value: 180 },
      { name: '石家庄/正定',value: 180 },
      { name: '乌鲁木齐/地窝堡',value: 180 },
      { name: '桂林/两江',value: 180 },
      { name: '昆明/长水',value: 180 },
      { name: '拉斯/贡嘎',value: 180 },
      { name: '鄂尔多斯',value: 180 },
      { name: '大连/周水子',value: 180},
      { name: '台湾/桃园',value: 180}
    ]

    // 移动的线路 eg: 石家庄/正定 - 广州/白云
    var moveLine = [
      {
        'coords': [[114.698493,38.280519], [113.314282, 23.395352]],
      },
      {
        'coords': [[114.698493,38.280519], [118.88205 ,31.73622]],
      },
      {
        'coords': [[114.698493,38.280519],[109.29 ,21.54]],
      },
      {
        'coords': [[114.698493,38.280519],[108.764882,34.438179]],
      },
          {
        'coords': [[114.698493,38.280519],[104.749306,31.42671]],
      },
          {
        'coords': [[114.698493,38.280519],[120.432414,30.234708]],
      },
          {
        'coords': [[114.698493,38.280519],[103.951229,30.559807]],
      },
          {
        'coords': [[114.698493,38.280519], [117.385436,49.604099]],
      },
          {
        'coords': [[114.698493,38.280519],[113.814829,22.633092]],
      },
      {
        'coords': [[114.698493,38.280519],[102.046712, 36.53521]],
      },

      {
        'coords': [[114.698493,38.280519],[87.487028,43.912386]],
      },
      {
        'coords': [[114.698493,38.280519],[102.935615,25.102871]],
      },
      {
        'coords': [[114.698493,38.280519],[90.918706,29.299495]],
      },
      {
        'coords': [[114.698493,38.280519],[102.046712, 36.53521]],
      },
      {
        'coords': [[114.698493,38.280519], [121.549576,38.969369]],
      },
      {
        'coords': [[114.698493,38.280519],[110.054552,25.223563]],
      },
      {
        'coords': [[114.698493,38.280519],[121.237049,25.081115]],
      },
      {
        'coords': [ [108.764882,34.438179],[109.29 ,21.54]]
      }
    ]




    // 飞机的图标
    var planePath = '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';


    /*
     * @prams data [{name: 'xxx', value: 123}]
     * @return data [{name: 'xxx', value: [经度，维度， 123]}]
     */
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };

    var color = ['#3ed4ff', '#ffa022', '#a6c84c'];

    var series = [
      {
        name: '红色圆点外圈黄色光晕',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function (val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#F4E925'
          }
        }
      },
      {
        type: 'map',
        map: 'jiangxi',
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#FFFFFF',
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        },
        animation: false,
        data: data
      },
      {
        name: '圆点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        // 数据
        data: convertData(data),
        // 圆点大小
        symbolSize: function (val) {
          return val[2] / 20;
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        itemStyle: {
          normal: {
            color: 'red',
            shadowBlur: 10,
            shadowColor: 'red'
          }
        },
        zlevel: 1
      },
      {
        name: ' 移动的线',
        type: 'lines',
        zlevel: 2,
        seriesIndex: 3,
        effect: {
          show: true,
          period: 3,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 10
        },
        lineStyle: {
          color: 'yellow',
          width: 2.5,
          opacity: 0.4,
          curveness: 0.1,
        },
        data: moveLine
      },
    ]

    var option = {
      geo: {
        map: 'china',
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#132937',
            borderColor: '#0692a4'
          },
          emphasis: {
            areaColor: '#0b1c2d'
          }
        },
      },
      series: series
    };

    myChart.setOption(option);

  </script>
    </div>
</body>
</html>

只会在被人的代码上改来改去，其实原理还不是非常懂。。。。。。先做到会模仿，但千万不要止步于此，否则就废了。

李大海的幸福生活

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2020-09-02航空航线分布图可做智慧大屏使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="wi.
复制链接

扫一扫