echarts 经纬度轨迹，可缩放

weixin_53607765

已于 2024-09-11 14:59:51 修改

阅读量319

点赞数 2

CC 4.0 BY-SA版权

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

于 2024-09-11 14:44:12 首次发布

本文链接：https://blog.csdn.net/weixin_53607765/article/details/142139664

echarts 专栏收录该内容

1 篇文章

订阅专栏

option = {
//x轴为经度
 xAxis: {
    min: -180,
    max: 180,
    type: 'value',
    axisLine: { onZero: false }
  },
//y轴为纬度
  yAxis: {
    min: -90,
    max: 90,
    type: 'value',
    axisLine: { onZero: false }
  },
//工具
 toolbox: {
    feature: {
      
      restore: {},//缩放后方便 还原
      saveAsImage: {} //下载图片
    }
  },
//缩放
    dataZoom: [
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      xAxisIndex: [0],
      startValue: -180,
      endValue: 180
    },
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      yAxisIndex: [0],
      startValue: -90,
      endValue: 90
    }
  ],
//鼠标停留显示的内容 
tooltip: {
    formatter: function (params) {
      var data = params.data || [0, 0];
      return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
    }
  },
//数据
  series: [
//第一个轨迹
    {
      data: [
        [-150, 30], 
        [84, -30], 
        [135, 47]
        ],
      
      smooth: true,
      type: 'line'
    },
//第二个轨迹
     {
      data: [
        [-10, 30], 
        [14, -30], 
        [55, 17]
        ],
      
      smooth: true,
      type: 'line'
    }
  ]
};

效果图：

缩放效果图