uniapp+vue3+vite+ts 开发app 引入echarts 方法

### 基于 UniApp 和 Vue3 的项目中引入并配置 ECharts #### 配置 Vite 和 TypeScript 环境 为了在基于 UniApp 和 Vue3 的项目中正确引入和配置 ECharts，首先需要确保项目的开发环境已经支持 Vite 和 TypeScript。以下是具体的实现方法： 1. **安装依赖项** 使用 npm 或 yarn 安装必要的依赖包，包括 `echarts` 及其适配器库 `echarts-for-weixin`（如果目标平台涉及微信小程序）。 ```bash npm install echarts @types/echarts --save ``` 2. **修改 tsconfig.json 文件** 在项目的根目录下找到 `tsconfig.json` 文件，并确认已启用以下选项以支持 TypeScript 类型检查： ```json { "compilerOptions": { "strict": true, "esModuleInterop": true, "moduleResolution": "node", "target": "esnext" } } ``` 3. **Vite 配置调整** 如果使用的是 Vite 构建工具，则需编辑 `vite.config.ts` 文件来加载自定义插件或扩展路径解析功能。例如： ```typescript import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; export default defineConfig({ plugins: [uni()], resolve: { alias: [ { find: '@/components', replacement: '/src/components' }, ], }, }); ``` --- #### 引入 ECharts 到组件中 通过脚本标签导入方式或者按需加载的方式可以减少打包体积。 1. **全局注册 ECharts** 将 ECharts 注册到应用实例上以便任何地方都能访问它。 ```javascript // main.ts 中添加如下代码 import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; // 渲染器 import { LineChart, BarChart } from 'echarts/charts'; // 图表类型 import { TitleComponent, TooltipComponent, GridComponent, } from 'echarts/components'; // 组件模块 echarts.use([ CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, GridComponent, ]); window.echarts = echarts; ``` 2. **局部使用 ECharts** 对单个页面单独初始化图表数据源及样式设置。 ```vue <!-- App.vue --> <template> <view class="container"> <canvas id="myChart"></canvas> </view> </template> <script setup lang="ts"> import { onMounted } from 'vue'; const initEchart = () => { const chartDom = document.getElementById('myChart'); if (!chartDom) return; const myChart = echarts.init(chartDom); const option = { title: { text: '示例折线图', }, tooltip: {}, xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [80, 90, 75, 60, 85], }], }; myChart.setOption(option); // 应用配置参数 }; onMounted(() => { initEchart(); }); </script> <style scoped> .container { width: 100%; height: 400px; } canvas { display: block; margin: auto; background-color: #fff; } </style> ``` 上述代码展示了如何利用 Vue3 Composition API 结合 TypeScript 初始化一个简单的折线图[^1]。 --- #### 注意事项 当运行多端编译时需要注意不同平台对于 DOM 节点操作的支持程度差异较大，在某些场景可能需要额外处理兼容逻辑。