vue3 echarts 设置占位图片

在Vue3中使用ECharts设置占位图片的方法如下：

1. 首先，你需要安装ECharts和Vue-ECharts插件。可以通过npm或yarn来安装它们：

npm install echarts vue-echarts

2. 在Vue组件中引入ECharts和Vue-ECharts插件：

import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent]);

export default {
  // ...
}

3. 在Vue组件的模板中，使用`vue-echarts`组件来渲染ECharts图表，并设置占位图片：

<template>
  <div>
    <vue-echarts :options="chartOptions" :loading="loading" :initOptions="initOptions"></vue-echarts>
  </div>
</template>

4. 在Vue组件的`data`选项中定义图表的配置项和数据：

export default {
  data() {
    return {
      chartOptions: {
        // 设置占位图片
        graphic: {
          type: 'image',
          id: 'placeholder',
          left: 'center',
          top: 'middle',
          z: 10,
          bounding: 'raw',
          style: {
            image: '占位图片的URL',
            width: 200,
            height: 200,
          },
        },
        // 其他ECharts配置项
        // ...
      },
      loading: true,
      initOptions: {
        renderer: 'canvas',
      },
    };
  },
  // ...
}

5. 在Vue组件的`mounted`生命周期钩子中，使用`echarts`对象初始化图表，并在数据加载完成后隐藏占位图片：

export default {
  // ...
  mounted() {
    const chart = echarts.init(this.$el);
    chart.setOption(this.chartOptions);
    
    // 模拟数据加载完成后隐藏占位图片
    setTimeout(() => {
      this.loading = false;
      chart.hideGraphic('placeholder');
    }, 2000);
  },
  // ...
}

这样，当图表数据加载完成后，占位图片将被隐藏，显示真实的ECharts图表。