Vite+Vue3使用ECharts

文章目录

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

一、项目搭建

初始化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应替换为你的项目名称。
进入项目目录
- 初始化完成后，进入项目目录：cd your-project-name。
安装依赖
- 安装项目依赖：npm install 或 yarn install。

二、安装ECharts

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

三、全局引入ECharts

在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

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

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>
```

在组件的<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的详细教程。