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

使用eCharts重复制作动画

echarts animation javascript

0

iayork · 技术社区 · 6 年前

我正在用eCharts绘制一些散点图。我有几个数据系列,我想要的是每个数据系列都按照我选择的动画顺序出现。取而代之的是,第一个系列的动画由我选择,但随后的系列将恢复为默认动画,即使(据我所见)我仍在为它们定义动画。

var chartOptions = function(seriesData) {
  let option = {
    xAxis: {
      min: 0,
      max: 11
    },
    yAxis: {
      min: 0,
      max: 11
    },
    series: [{
      name: "Series 1",
      type: 'scatter',
      data: seriesData,
      color: "red",
      animationDelay: function(idx) {
        return idx * 250;
      },
      animationEasingUpdate: "linear"
    }, ]
  };
  return option;
};

var nextSeries = function(seriesData) {
  let series = {
    series: [{
      name: "Next series",
      type: 'scatter',
      data: seriesData,
      color: "blue",
      animationDelay: function(idx) {
        return idx * 250;
      },
      animationEasingUpdate: "linear"
    }, ]
  };
  return series;
};

var series1 = [
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4],
  [5, 5]
];
var series2 = [
  [10, 10],
  [9, 9],
  [8, 8],
  [7, 7],
  [6, 6]
];
var series3 = [
  [10, 10],
  [1, 1],
  [8, 8],
  [2, 2],
  [6, 6]
];
var seriesAll = [series1, series2, series3]

var options = chartOptions(series1);
var chart1 = echarts.init(document.getElementById("ChartView"));
chart1.setOption(options);
var i = 0;
var timer = setInterval(function() {
  i++;
  if (i >= seriesAll.length) {
    clearInterval(timer)
  } else {
    var nextOptions = nextSeries(seriesAll[i])
    chart1.setOption(nextOptions);
  };
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>


<div id="ChartView" style="height:300px;max-width:300px;">
</div>

1 回复 | 直到 6 年前

1

2

Clocher Zhong 6 年前

您可以先清除所有散点图,然后绘制下一系列,如下所示:

chart1.setOption(nextSeries([]));
chart1.setOption(nextOptions);

var chartOptions = function(seriesData) {
    let option = {
        xAxis: {
            min: 0,
            max: 11
        },
        yAxis: {
            min: 0,
            max: 11
        },
        series: [{
            name: "Series 1",
            type: 'scatter',
            data: seriesData,
            color: "red",
            animationDelay: function(idx) {
                return idx * 250;
            },
            animationEasingUpdate: "linear"
        }, ]
    };
    return option;
};

var nextSeries = function(seriesData) {
    let series = {
        series: [{
            name: "Next series",
            type: 'scatter',
            data: seriesData,
            color: "blue",
            animationDelay: function(idx) {
                return idx * 250;
            },
            animationEasingUpdate: "linear"
        }, ]
    };
    return series;
};

var series1 = [
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
];
var series2 = [
    [10, 10],
    [9, 9],
    [8, 8],
    [7, 7],
    [6, 6]
];
var series3 = [
    [10, 10],
    [1, 1],
    [8, 8],
    [2, 2],
    [6, 6]
];
var seriesAll = [series1, series2, series3]

var options = chartOptions(series1);
var chart1 = echarts.init(document.getElementById("ChartView"));
chart1.setOption(options);
var i = 0;
var timer = setInterval(function() {
    i++;
    if (i >= seriesAll.length) {
        clearInterval(timer)
    } else {
        var nextOptions = nextSeries(seriesAll[i])
        chart1.setOption(nextSeries([]));
        chart1.setOption(nextOptions);
    };
}, 2000);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"> </script>
<div id = "ChartView" style = "height:300px;max-width:300px;" >
</div>