echarts-component

Appearance

VueEcharts 组件说明 ​

概述 ​

VueEcharts 是 echarts-component 库中的核心组件，用作所有图表的根容器。它负责初始化 ECharts 实例、管理生命周期以及处理与子组件的通信。通过这个组件，你可以轻松地将 ECharts 图表集成到 Vue 应用中，并利用组件化的优势来构建复杂的数据可视化界面。

使用方式 ​

VueEcharts 组件还支持组件化的配置方式，通过嵌套子组件来构建图表：

vue
<template>
  <VueEcharts>
    <Bar :data="[65, 59, 80, 81, 56, 55]" name="销量" />
    <XAxis :data="['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']" />
    <YAxis />
    <Title text="商品销量统计" />
    <Tooltip trigger="axis" />
    <Legend />
  </VueEcharts>
</template>

WARNING

在使用VueEcharts时建议当前组件仅存在一个VueEcharts标签，避免多个VueEcharts引入导致的注入混乱。

与原生 ECharts 的对比 ​

特性VueEcharts 组件化方式原生 ECharts 方式
代码结构组件嵌套，结构清晰单一 JSON 对象，复杂配置易混乱
类型安全完整 TypeScript 支持需要手动定义类型
响应式更新自动响应数据变化需要手动调用 setOption
生命周期管理自动处理需要手动管理
事件绑定直接通过事件属性绑定需要手动调用 on 方法
组件复用易于创建可复用的图表组件需要自行封装

Composition API 支持 ​

使用 useVueEcharts 组合式函数 ​

echarts-component提供了 useVueEcharts 组合式函数，让你可以在 Composition API 中更方便地使用 ECharts。

基本用法 ​

vue
<template>
 <VueEcharts>
    <!-- 组件配置  -->
 </VueEcharts>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useVueEcharts } from 'echarts-component'

const { echartRef } = useVueEcharts()

返回值 ​

useVueEcharts 函数返回一个包含以下属性和方法的对象：

属性/方法描述
echartRefECharts 实例的实例对象，可以用来访问原生 ECharts API