代码之家 › 专栏 › 技术社区 › xianshenglu

如何使用echarts以相同的动画速度绘制多条连续曲线

echarts javascript

xianshenglu · 技术社区 · 6 年前

我在使用 echarts 在地图中绘制曲线。例如 https://gallery.echartsjs.com/editor.html?c=xDYyde55iN&v=3 我希望与你划清界限 lineStyle.curveness 。但是,正如您在演示中所看到的, 这个 polyline: false 不适用于 data.coords 超过2项,中的最后一项 数据坐标 已忽略。如果与一起使用 polyline: true 这个 curveness 将失败。

所以我希望这样 https://gallery.echartsjs.com/editor.html?c=xXrcAUdpxw 我通过延迟最后一行动画来实现这一点。然而,如果使用这个,我不能 保持相同的动画速度 行之间。

所以,我想知道是否有办法 保持相同的动画速度 基于此演示的行之间 https://gallery.echartsjs.com/editor.html?c=xXrcAUdpxw 。

0 回复 | 直到 6 年前

Indra Rudianto 5 年前

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

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

从现在开始,让我们为每个箭头取100 km/s的恒定速度。

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

路径1:

[“121.207619”,“31.237319”]和[“114.48229029384036”,“36.76552732148951”]之间的距离为872 km。行程时间:(872公里)/(100公里/秒)=8.72秒
[“114.48229029384036”,“36.76552732148951”]和[“116.119589”,“38.113789”]之间的距离为208 km。行程时间:2.08秒

路径2:

[“121.207619”,“31.237319”]和[“116.06354284749577”,“39.49194673976087”]之间的距离为1028 km。行程时间:10.28秒
[“116.06354284749577”,“39.49194673976087”]和[“116.119589”,“38.113789”]之间的距离为153 km。行程时间:1.53秒

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

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

第1行:

设置 animationDuration 箭头沿线1移动所需的移动时间,即8720(毫秒),以及 effect.period 至8.72(秒)。然后,设置 animationDelay 和 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行中,设置 动画持续时间 箭头沿直线2移动所需的移动时间,即2080(毫秒)并设置 效应时期 至2.08(秒)。设置 效应延迟 和 动画延迟 到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,
};