时间戳

首页 > 解决方案 > 如何使用echarts以相同的动画速度绘制多条串行曲线线

javascript - 如何使用echarts以相同的动画速度绘制多条串行曲线线

问题描述

我正在使用echarts在地图中绘制曲线。例如，https://gallery.echartsjs.com/editor.html?c=xDYyde55iN&v=3 我希望用lineStyle.curveness. 但是，正如您在演示中看到的polyline: false那样， 不能使用data.coords超过 2 个，最后一项data.coords被忽略了。如果使用 with polyline: true，curveness将会失败。

所以我希望像这样的https://gallery.echartsjs.com/editor.html?c=xXrcAUdpxw 我通过延迟最后一行动画来实现这一点。但是，如果使用它，我无法在行之间保持相同的动画速度。

因此，我正在寻找是否有一种方法可以根据此演示 https://gallery.echartsjs.com/editor.html?c=xXrcAUdpxw 在行之间保持相同的动画速度。

标签： javascriptecharts

解决方案

根据我对这个问题的理解，我试图通过基于以下演示https://gallery.echartsjs.com/editor.html?c=xXrcAUdpxw的实际案例来解决这个问题。

在演示中，有两条路径，每条由两行组成。总之，我们可以通过计算箭头沿路径移动的时间来实现相同的动画速度。

从现在开始，让我们为每个箭头采用 100 公里/秒的恒定速度。

第一步是计算路径中两点之间的每个距离：

路径一：

  • ["121.207619", "31.237319"] 和 ["114.48229029384036", "36.76552732148951"] 之间的距离是 872 公里。行程时间：（872 公里）/（100 公里/秒）= 8.72 秒
  • ["114.48229029384036", "36.76552732148951"] 和 ["116.119589", "38.113789"] 之间的距离是 208 公里。行程时间：2.08 秒

路径 2：

  • ["121.207619", "31.237319"] 和 ["116.06354284749577", "39.49194673976087"] 之间的距离是 1028 公里。行程时间：10.28 秒
  • ["116.06354284749577", "39.49194673976087"] 和 ["116.119589", "38.113789"] 之间的距离是 153 公里。行程时间：1.53 秒

您可以使用已经可用的库来计算两个坐标之间的距离。

现在，我们可以使用这些信息在图表选项中设置动画持续时间。例如，对于路径 1：

  • 第 1 行：

设置animationDuration箭头沿线 1 移动所用的行程时间，即 8720（毫秒）和effect.period8.72（秒）。然后，将animationDelayand设置effect.delay为 0，因为它立即开始。我们还设置animationThreshold了足够大，以便 ECharts 不会忽略动画。请参见下面的示例：

{
  type: "lines",
  coordinateSystem: "bmap",
  zlevel: 1,
  lineStyle: {
    normal: {
      color: "#ff0000",
      width: 2,
      opacity: 0.3,
      curveness: 0.2,
    },
  },
  animationThreshold: 100000,
  animationDuration: 8720,
  animationEasing: "linear",
  effect: {
    show: true,
    trailLength: 0,
    symbol: "arrow",
    symbolSize: 10,
    loop: false,
    period: 8.72,
    delay: 0,
  },
  animationDelay: 0,
  data: [
    {
      fromName: "上海",
      toName: "邢邯",
      coords: [
        ["121.207619", "31.237319"],
        ["114.48229029384036", "36.76552732148951"],
      ],
    },
  ],
},
  • 第 2 行：

在第 2 行中，设置animationDuration为箭头沿第 2 行移动所用的行程时间，即 2080（毫秒）并设置effect.period为 2.08（秒）。设置effect.delayandanimationDelay为 8720（毫秒），因为它在第 1 行动画完成时开始。请参见下面的示例：

{
  type: "lines",
  coordinateSystem: "bmap",
  zlevel: 1,
  lineStyle: {
    normal: {
      color: "#ff0000",
      width: 2,
      opacity: 0.3,
      curveness: 0.2,
    },
  },
  animationThreshold: 100000,
  animationDuration: 2080,
  animationEasing: "linear",
  symbol: ["none", "arrow"],
  symbolSize: 10,
  effect: {
    show: true,
    trailLength: 0,
    symbol: "arrow",
    symbolSize: 10,
    loop: false,
    period: 2.08,
    delay: 8720,
  },
  animationDelay: 8720,
  data: [
    {
      fromName: "邢邯",
      toName: "沧衡",
      coords: [
        ["114.48229029384036", "36.76552732148951"],
        ["116.119589", "38.113789"],
      ],
    },
  ],
},

最后对路径 2 中的第 3 行和第 4 行使用相同的方法。

完整示例：

var series = [
  {
    type: "lines",
    coordinateSystem: "bmap",
    zlevel: 1,
    lineStyle: {
      normal: {
        color: "#ff0000",
        width: 2,
        opacity: 0.3,
        curveness: 0.2,
      },
    },
    animationThreshold: 100000,
    animationDuration: 8720,
    animationEasing: "linear",
    effect: {
      show: true,
      trailLength: 0,
      symbol: "arrow",
      symbolSize: 10,
      loop: false,
      period: 8.72,
      delay: 0,
    },
    animationDelay: 0,
    data: [
      {
        fromName: "上海",
        toName: "邢邯",
        coords: [
          ["121.207619", "31.237319"],
          ["114.48229029384036", "36.76552732148951"],
        ],
      },
    ],
  },
  {
    type: "lines",
    coordinateSystem: "bmap",
    zlevel: 1,
    lineStyle: {
      normal: {
        color: "#ff0000",
        width: 2,
        opacity: 0.3,
        curveness: 0.2,
      },
    },
    animationThreshold: 100000,
    animationDuration: 2080,
    animationEasing: "linear",
    symbol: ["none", "arrow"],
    symbolSize: 10,
    effect: {
      show: true,
      trailLength: 0,
      symbol: "arrow",
      symbolSize: 10,
      loop: false,
      period: 2.08,
      delay: 8720,
    },
    animationDelay: 8720,
    data: [
      {
        fromName: "邢邯",
        toName: "沧衡",
        coords: [
          ["114.48229029384036", "36.76552732148951"],
          ["116.119589", "38.113789"],
        ],
      },
    ],
  },
  {
    type: "lines",
    coordinateSystem: "bmap",
    zlevel: 1,
    lineStyle: {
      normal: {
        color: "#ff0000",
        width: 2,
        opacity: 0.3,
        curveness: 0.2,
      },
    },
    animationThreshold: 100000,
    animationDuration: 10280,
    animationEasing: "linear",
    effect: {
      show: true,
      trailLength: 0,
      symbol: "arrow",
      symbolSize: 10,
      loop: false,
      period: 10.28,
      delay: 0,
    },
    animationDelay: 0,
    data: [
      {
        fromName: "上海",
        toName: "京南",
        coords: [
          ["121.207619", "31.237319"],
          ["116.06354284749577", "39.49194673976087"],
        ],
      },
    ],
  },
  {
    type: "lines",
    coordinateSystem: "bmap",
    zlevel: 1,
    lineStyle: {
      normal: {
        color: "#ff0000",
        width: 2,
        opacity: 0.3,
        curveness: 0.2,
      },
    },
    animationThreshold: 100000,
    animationDuration: 1530,
    animationEasing: "linear",
    symbol: ["none", "arrow"],
    symbolSize: 10,
    effect: {
      show: true,
      trailLength: 0,
      symbol: "arrow",
      symbolSize: 10,
      loop: false,
      period: 1.53,
      delay: 10280,
    },
    animationDelay: 10280,
    data: [
      {
        fromName: "京南",
        toName: "沧衡",
        coords: [
          ["116.06354284749577", "39.49194673976087"],
          ["116.119589", "38.113789"],
        ],
      },
    ],
  },
];

option = {
  bmap: {
    zoom: 6,
    roam: true,
  },
  animation: false,
  series,
};

推荐阅读