vue ecahts 加载动画

可以通过在 Vue 中使用 ECharts 的 `loading` 配置项来添加加载动画。具体步骤如下：

1. 在 Vue 组件中引入 ECharts。

import echarts from 'echarts'

2. 在 Vue 的 `mounted` 生命周期钩子函数中初始化 ECharts，并设置加载动画。

mounted() {
  // 初始化 ECharts
  const chart = echarts.init(this.$refs.chart)

  // 设置加载动画
  chart.showLoading({
    text: '数据加载中', // 加载动画的文本
    color: '#c23531', // 加载动画的颜色
    textColor: '#000', // 加载动画文本的颜色
    maskColor: 'rgba(255, 255, 255, 0.8)', // 加载动画的背景色
    zlevel: 0 // 加载动画的层级
  })

  // 加载数据并绘制图表
  this.loadData().then(data => {
    chart.hideLoading() // 隐藏加载动画
    chart.setOption(this.getOption(data)) // 绘制图表
  })
}

3. 在 Vue 的 `template` 中添加一个 `<div>` 元素作为 ECharts 的容器，并使用 `ref` 属性引用它。

<template>
  <div class="chart-container" ref="chart"></div>
</template>

4. 在 CSS 文件中设置 ECharts 容器的样式。

.chart-container {
  width: 100%;
  height: 400px;
}

这样就可以在 Vue 中使用 ECharts 并添加加载动画了。