Echarts飞线图demo

公司大屏项目需要完成一个含有飞线图功能的地图,经过查询资料借鉴,写了一个区的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,
       
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值