uniapp作为一款出色的跨平台前端框架，以其一套代码多端运行的特性，深受开发者喜爱。echarts作为数据可视化领域的佼佼者，提供了丰富的图表类型和灵活的配置选项。本文将带你领略在uniapp中使用echarts的两种不同方式：Vue2的传统方法和Vue3的组合式API。

一、uniapp集成echarts的准备

在开始之前，无论是Vue2还是Vue3，都需要进行以下准备工作：

1. 创建uniapp项目，并选择对应的Vue版本。
2. 在项目根目录下，通过npm安装echarts依赖：

npm install echarts --save

二、Vue2中的echarts集成

1、引入echarts

在Vue2页面或组件的<script>标签中，引入echarts：

import * as echarts from 'echarts';

2、初始化echarts实例

在Vue2的mounted生命周期钩子中初始化echarts实例：

export default {data() {return {chart: null};},mounted() {this.chart = echarts.init(this.$refs.myChart);this.setOptions();},methods: {setOptions() {const option = {// 配置项};this.chart.setOption(option);}}
};

3、创建图表容器

在Vue2的模板中添加一个图表容器：

<view class="chart-container" ref="myChart"></view>

4、设置容器样式

在样式表中为图表容器设置宽高：

.chart-container {width: 100%;height: 300px;
}

三、Vue3组合式API中的echarts集成

1、引入echarts

在Vue3页面或组件的<script setup>标签中，引入echarts：

import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

2、初始化echarts实例

使用Vue3的组合式API初始化echarts实例：

const chart = ref(null);onMounted(() => {chart.value = echarts.init(chart.value);setOptions();
});const setOptions = () => {const option = {// 配置项};chart.value.setOption(option);
};

3、创建图表容器

在Vue3的模板中添加一个图表容器，并通过ref绑定：

<view class="chart-container" ref="chart"></view>

4、设置容器样式

在样式表中为图表容器设置宽高：

.chart-container {width: 100%;height: 300px;
}

四、总结

通过本文，我们了解了在uniapp中使用echarts的两种方式：Vue2的传统方法和Vue3的组合式API。这两种方法各有千秋，Vue2更适合习惯传统Vue开发模式的开发者，而Vue3的组合式API则提供了更灵活和简洁的代码组织方式。无论选择哪种方式，echarts都能为你的uniapp项目带来丰富的数据可视化体验。希望本文能助你一臂之力！