echarts中国地图飞行线

1、首先使用的是:echart4.几版本,需要引入中国地图的json文件

import chinaCityJson from 'echarts/map/json/china.json'
2,我这个地图主要有两种类型的点,一个是飞线终点的配置,一个是飞线起点的配置,并且地图做了一个阴影悬浮,所有option里面的series有四个,具体如下

  option = {
        visualMap: {
          show: false,
          type: 'continuous',
          calculable: true,
          left: '0%',
          bottom: '3%',
          dimension: 0, // 指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
          seriesIndex: 1,
          itemWidth: 15, // 图形的宽度,即长条的宽度。
          itemHeight: 68,
          min: 0,
          // max: that.mapmax,
          // color: ['#01fffd', '#1E74FF'],
          // color: ['#0B64F3', '#1A05B8'],
          color: ['#007EF9 ', '#0B275E'],
          textStyle: {
            color: '#ccc',
            fontSize: 12
          }
        },
        tooltip: {
          // 轮播框
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            color: '#b8c8e5',
            fontSize: 13
          },
          backgroundColor: 'rgba(15,33,70,0.7)',
          borderColor: 'rgba(54,82,132,0.7)',
          borderWidth: 1,
          padding: [10, 14],
          extraCssText: 'z-index:4',
          formatter: function (parma:any) {
            if(parma.seriesType === 'effectScatter') {
              return parma.name
            } else {
              return  parma.name
            }
          }
        },
        legend: {
          show: false,
          color: ['#5bffde'],
          icon: 'circle', // 只显示小圆点
 
          top: '10.7%',
          // bottom: '2.8%',
          left: '2%',
          itemGap: 22,
          itemWidth: 8, // 图例图形宽度
          textStyle: {
            color: '#ffff',
            fontSize: 14,
            fontWeight: 'normal',
            // align: "left",
            padding: [0, 3],
            fontFamily: 'Microsoft YaHei'
          },
          itemHeight: 8 // 改变圆圈大小
        },
        geo: {
          zoom: 1.22, // 缩放比例
          top: '11%',
          left: '20%',
          show: true,
          aspectScale: 0.85,
          silent: true, // 鼠标事件是否开启
          animation: true,
          map: 'china',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: false, //是否可缩放
          //  aspectScale: 1, //长宽比
          // 这里是重点!!!
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0 // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
 
          itemStyle: {
            normal: {
              // areaColor: '#122C69', // #415ef7
              borderColor: '#122C69',
              shadowColor: '#122C69',
              shadowOffsetX: 1,
              shadowOffsetY: 9
              // borderWidth: 3,
            },
            emphasis: {
              areaColor: &#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值