从0快速上手Vue3.0组合式API-useCharts

2024-02-21 18:16:16

前言

继续组合式api的分享，今天分享useCharts

介绍

useCharts是针对echarts图表类公共逻辑的抽离，useCharts只是一个基类，比如useBar是在当前业务场景下根据useCharts二次开发的，主要针对柱状图做了二次封装，结合了当前业务需求做了很多自定义的功能，例如：点击柱状图可以触发一系列操作，柱状图数据项上显示气泡提示等，都是针对业务场景进行开发的，代码量不大，但业务上用起来很方便。

使用

首先，需要安装useCharts包：

npm install @vueuse/echarts

然后，在你的Vue组件中，你可以这样使用useCharts：

import { useCharts } from '@vueuse/echarts'

export default {
  setup() {
    const chart = useCharts()

    return {
      chart
    }
  }
}

接下来，你就可以在你的模板中使用useCharts了：

<template>
  <div>
    <echarts :options="chart.options" />
  </div>
</template>

配置

你可以通过传入options对象来配置useCharts：

const chart = useCharts({
  options: {
    title: {
      text: '我的第一个图表'
    },
    series: [
      {
        type: 'bar',
        data: [1, 2, 3]
      }
    ]
  }
})

事件

useCharts支持以下事件：

ready: 图表已经准备就绪
click: 图表上的某个元素被点击
hover: 图表上的某个元素被悬停

你可以通过传入on对象来监听这些事件：

const chart = useCharts({
  options: {
    title: {
      text: '我的第一个图表'
    },
    series: [
      {
        type: 'bar',
        data: [1, 2, 3]
      }
    ]
  },
  on: {
    ready: () => {
      console.log('图表已经准备就绪')
    },
    click: (event) => {
      console.log('图表上的某个元素被点击')
    },
    hover: (event) => {
      console.log('图表上的某个元素被悬停')
    }
  }
})