vue 使用echarts图表 常用配置详解

官网：Apache ECharts

一、下载依赖：

cnpm install echarts

二、导入ECharts库：

import * as echarts from 'echarts'

三、在组件中定义一个引用（ref）。声明变量chartInstance。

(ref)用于存储ECharts实例。 chartInstance这个变量用来存储 ECharts 图表实例，以便你在组件的生命周期内可以进行图表的初始化、更新和销毁操作。：

const chartNf= ref(null);
let chartInstance;

四、在组件的模板中创建一个元素

这将作为ECharts图表的容器。为了确保ECharts在正确的时机进行初始化和销毁，你可以使用Vue的生命周期钩子函数：

<template>
  <div>
    <div ref="chartNf" style="width: 100%; height: 400px;"></div>
  </div>
</template>

五、在组件中，使用onMounted钩子来初始化ECharts图表实例：

onMounted(() => {
  // 初始化ECharts图表