在vue3项目中引入echarts

### 如何在 Vue3 中安装和配置 ECharts #### 安装依赖 为了在 Vue3 项目中集成 ECharts，需要先通过包管理工具 `pnpm` 或其他工具（如 npm/yarn）来安装必要的依赖项。具体命令如下： ```bash pnpm install echarts vue-echarts ``` 这一步骤会引入两个核心模块：一个是基础的 ECharts 库本身 (`echarts`)，另一个是专门为 Vue 封装好的组件库 (`vue-echarts`) [^1]。 #### 配置全局变量 (可选方法) 如果希望在整个应用范围内都可以访问到 ECharts 实例而无需每次都单独导入，则可以考虑将其挂载至 Vue 的原型链上。以下是实现方式之一： ```javascript // main.js or equivalent entry file of your project. import { createApp } from 'vue'; import App from './App.vue'; // Importing the necessary libraries as per documentation provided by user's reference material. import * as echarts from 'echarts'; const app = createApp(App); app.config.globalProperties.$echarts = echarts; // Making it globally accessible within all components. export default app.mount('#app'); ``` 上述代码片段展示了如何将 ECharts 设置成全局属性以便于任何地方调用它[^2] 。注意这里采用了 ES Module 导入语法而非 CommonJS ，这是由于 Vue3 默认支持前者所致。 #### 组件内部使用示例 当完成以上准备工作之后，在实际开发过程中就可以很方便地利用这些资源绘制图表了。下面给出一个简单的例子说明怎样在一个普通的 Vue 单文件组件(SFC)里边操作数据展示柱状图: ```html <template> <div ref="chartRef" style="width: 600px;height:400px;"></div> <!-- Container element --> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name:"BarChart", setup(){ const chartRef=ref(null); let myChart; onMounted(() => { if (!chartRef.value){ console.error('Element not found!'); return ; } myChart = echarts.init(chartRef.value); // Initialize instance based upon DOM node var option ={ title :{ text:'Sample Bar Chart', subtext:'', x:'center' }, tooltip:{ trigger:'axis' }, xAxis:[ {type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat']} ], yAxis:[{ type:'value'}], series:[ { name:'Sales Volume', type:'bar', data:[120,200,150,80,70,110] } ] }; myChart.setOption(option); // Apply configuration options to render graph }); return {chartRef}; } }); </script> ``` 此脚本定义了一个新的 Vue 组件叫做 BarChart 并且包含了初始化以及渲染基本条形统计图所需的逻辑.