Vite+Vue3使用ECharts

在使用Vite和Vue 3结合ECharts进行项目开发时，可以遵循以下详细步骤来集成和使用ECharts。这个教程将涵盖从项目搭建到ECharts配置的全过程。

一、项目搭建

1. 初始化Vite项目

   • 使用npm或yarn来初始化一个新的Vite项目。如果你使用npm，可以运行npm init vite@latest your-project-name -- --template vue；如果使用yarn，可以运行yarn create vite your-project-name -- --template vue。这里的your-project-name应替换为你的项目名称。

2. 进入项目目录

   • 初始化完成后，进入项目目录：cd your-project-name。

3. 安装依赖

   • 安装项目依赖：npm install 或 yarn install。

二、安装ECharts

• 使用npm或yarn安装ECharts：npm install echarts --save 或 yarn add echarts。

三、全局引入ECharts

1. 在main.js或main.ts中引入ECharts

   • 首先，从ECharts包中引入echarts。
   • 然后，通过Vue的app.config.globalProperties将echarts注册为全局属性，以便在组件中直接使用。

   // main.js 或 main.ts
   import { createApp } from 'vue'
   import App from './App.vue'
   import * as echarts from 'echarts'
   
   const app = createApp(App)
   app.config.globalProperties.$echarts = echarts
   app.mount('#app')
   

四、在Vue组件中使用ECharts

1. 创建ECharts图表容器

   • 在Vue组件的模板部分，添加一个用于承载ECharts图表的div元素，并为其指定一个ref属性以便在JavaScript中引用。

   <!-- YourComponent.vue -->
   <template>
     <div ref="chartRef" style="width: 600px; height: 400px;"></div>
   </template>
   

2. 在组件的<script setup>部分初始化ECharts实例

   • 使用onMounted钩子函数来确保在DOM元素挂载后初始化ECharts实例。
   • 通过this.$echarts（如果在组件中使用）或直接从echarts包中引入的echarts来初始化图表。

   <script setup>
   import { onMounted, ref } from 'vue'
   
   const chartRef = ref(null)
   
   onMounted(() => {
     const myChart = echarts.init(chartRef.value)
     const option = {
       // ECharts配置项
       title: {
         text: '示例图表'
       },
       tooltip: {},
       xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
       },
       yAxis: {},
       series: [{
         name: '销量',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20]
       }]
     }
     myChart.setOption(option)
   })
   </script>
   

五、按需引入ECharts模块

• 为了减小最终打包体积，你可以根据需要只引入ECharts的核心模块和所需的图表、组件等。

  // 引入echarts核心模块
  import * as echarts from 'echarts/core';
  // 引入柱状图图表
  import { BarChart } from 'echarts/charts';
  // 引入提示框和标题组件
  import { TitleComponent, TooltipComponent } from 'echarts/components';
  // 引入Canvas渲染器
  import { CanvasRenderer } from 'echarts/renderers';
  
  // 注册必须的组件
  echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer]);
  

六、其他注意事项

• 配置ECharts的Option：ECharts的强大之处在于其灵活的配置项。你可以根据需要调整option对象来定制图表的外观和行为。
• 响应式调整：当图表容器大小变化时，需要调用myChart.resize()方法来确保图表能够自适应新的尺寸。
• ECharts版本更新：ECharts会定期发布新版本，建议定期检查并更新到最新版本以获取最新的功能和性能改进。

以上就是在Vite和Vue 3项目中集成和使用ECharts的详细教程。