如何将Apexcharts.js折线图启动动画从下到上改为从左到右

可以实现，ApexCharts 官方没有提供直接修改折线图启动动画方向的配置参数，可通过以下方案实现左到右的启动动画效果：

核心思路是关闭默认的从下到上初始动画，通过图表挂载完成后动态更新数据的方式，触发折线从左到右的绘制动画。

修改后的JS代码示例 #

var options = {
  chart: {
    height: 380,
    type: "line",
    id: "areachart-2",
    // 新增动画相关配置
    animations: {
      initialAnimation: {
        enabled: false // 关闭默认初始动画
      },
      dynamicAnimation: {
        speed: 800 // 调整从左到右动画的速度，单位ms
      }
    },
    // 新增挂载完成事件监听
    events: {
      mounted: function(chart) {
        // 渲染完成后传入真实数据，触发从左到右绘制动画
        chart.updateSeries([{
          data: series.monthDataSeries1.prices
        }])
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: "straight"
  },
  // 初始series传入空数据
  series: [
    {
      data: []
    }
  ],
  labels: series.monthDataSeries1.dates,
  xaxis: {
    type: "datetime",
    labels: {
      rotate: 0,
      formatter: function(val) {
        return dayjs(val).format('MMM YYYY')
      }
    },
    tooltip: {
      formatter: function(val) {
        return dayjs(val).format('MMM YYYY')
      }
    }
  },
  tooltip: {
    x: {
      formatter: function(val) {
        return dayjs(val).format('MMM DD, YYYY');
      }
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

内容的提问来源于stack exchange，提问作者fatihturan