在uni-app中使用Vue 3适配ECharts，可以通过echarts-for-weixin或@qiun/echarts-for-uniapp这样的第三方库来实现，这些库针对小程序和uni-app做了优化。以下是一个使用@qiun/echarts-for-uniapp的示例，展示如何在Vue 3项目中集成和配置ECharts。

1. 安装依赖

首先，安装@qiun/echarts-for-uniapp依赖：

npm install @qiun/echarts-for-uniapp --save

2. 引入和注册组件

在你的Vue组件中引入并使用ECharts组件。以下是一个简单的示例：

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from '@qiun/echarts-for-uniapp';

const ec = ref({
  onInit: initChart
});

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  const option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

  chart.setOption(option);
  return chart;
}

onMounted(() => {
  // 可以在这里做一些额外的初始化工作
});

onUnmounted(() => {
  // 清理工作，比如销毁图表实例
  if (ec.value && ec.value.chart) {
    ec.value.chart.dispose();
  }
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 500rpx;
}
</style>

3. 配置pages.json

确保在pages.json中正确配置了组件路径，如果使用的是自定义组件，需要添加路径配置。

4. 注意事项

• ec-canvas是@qiun/echarts-for-uniapp提供的组件，用于渲染ECharts图表。
• ec对象中的onInit方法会在组件初始化时被调用，用于初始化图表。
• 在onUnmounted生命周期钩子中销毁图表实例，避免内存泄漏。

以上代码提供了一个基本的框架，展示了如何在uni-app的Vue 3项目中集成和配置ECharts。根据具体需求，你可以进一步自定义图表的配置和样式。