在 Vue3 中，可以使用 `watch` 监听数据的变化，然后在回调中调用
echarts 的 `setOption` 方法重新渲染图表。具体的实现步骤如下：
1. 安装
echarts：
```bash
npm install
echarts
```
2. 在组件中引入
echarts：
```javascript
import * as
echarts from '
echarts';
```
3. 在组件的 `setup` 函数中，定义一个 `ref` 引用变量用于存储
echarts 实例：
```javascript
const chartRef = ref(null);
```
4. 在组件的模板中，创建一个 div 元素用于渲染
echarts 图表，并设置 `ref` 属性指向上一步定义的 `chartRef`：
```html
<div ref="chartRef" style="width: 100%; height: 300px;"></div>
```
5. 在组件的 `watch` 方法中，监听需要变化的数据，并在回调中调用
echarts 的 `setOption` 方法重新渲染图表。需要注意的是，在第一次
加载组件时也需要调用 `setOption` 方法进行初始化，因此需要将初始化代码放在 `watch` 回调中的外部：
```javascript
watch(
() => data,
() => {
if (!chartRef.value) {
// 初始化
echarts 实例
chartRef.value =
echarts.init(chartRef.value);
}
// 调用 setOption 方法重新渲染图表
chartRef.value.setOption(options);
},
{ immediate: true } // 在第一次
加载组件时立即执行回调
);
```
完整的代码示例如下：
```html
<template>
<div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>
<script>
import * as
echarts from '
echarts';
import { ref, watch } from 'vue';
export default {
name: '
EchartsDemo',
setup() {
const chartRef = ref(null); // 定义一个 ref 引用变量
const data = [1, 2, 3, 4, 5]; // 需要监听的数据
const options = {
//
echarts 的配置项
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
},
yAxis: {
type: 'value',
},
series: [
{
data: data,
type: 'line',
},
],
};
// 监听 data 数据的变化，重新渲染图表
watch(
() => data,
() => {
if (!chartRef.value) {
// 初始化
echarts 实例
chartRef.value =
echarts.init(chartRef.value);
}
// 调用 setOption 方法重新渲染图表
chartRef.value.setOption(options);
},
{ immediate: true } // 在第一次
加载组件时立即执行回调
);
return {
chartRef,
};
},
};
</script>
```
5204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
