vue3.0组合式API-useBar

更多文章

前言

上次分享了useCharts，今天具化到柱状图来分享一下useBar，这里不会对所有的图表类进行封装，业务中遇到了就会进行合适的封装

介绍

useBar是在useCharts基础上对柱状图的封装，接下来以getBaseBar返回的数据作为option配置

/**
 * 场景：适用于目前ui设计通用柱状图，若有差异需额外扩展或另外封装
 * @param xData x轴数据
 * @param dataSource y轴数据
 * @param xDeg x轴倾斜角度，默认为零，为了容错提供配置入口
 * @param grid x、y轴位置，为了容错提供配置入口，bottom默认为8%，demo： { left: '1%', right: '1%' }
 */
export const getBaseBar = ({
  xData = [],
  dataSource = [],
  xDeg = 0,
  grid = {}
} = {}) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      bottom: '8%',
      containLabel: true,
      ...grid,
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#9AA6B8'
        }
      },
      axisLabel: {
        interval: 0,
        rotate: xDeg,
        formatter: (value) => {
          if (value.length > 3) return value.substring(0, 3) + '...'
          return value
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [{
      data: dataSource,
      type: 'bar',
      barWidth: 16,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        show: true,
        position: 'top',
        color: '#9AA6B8'
      },
      color: ['#3C5DA4']
    }]
  }
}

基础使用

import useBar from '@/hooks/creditOverView/useBar'
import { getBaseBar } from '@/consts/baseBar'
// id: 元素id选择器，request: 接口， xKey: x轴从接口返回数据中对应的key值，dkey：y轴从接口返回数据中对应的key值，option：chart配置
useBar({
  id: 'sale-chart',
  request,
  xKey: 'xKey',
  dKey: 'yKey',
  option: getBaseBar({ grid: { left: '3%', right: '8%' } })
})

入参

useBar并没有useChart所有参数，如isResize，但以满足当前需求，若无法满足，可自行添加入参

参数	说明	类型	可选值	默认值
id	id选择器	String	-	-
request	接口请求	Promise	-	-
option	chart配置，默认为getBaseBar返回值	Object	-	getBaseBar()
isInit	是否初始化chart	Boolean	-	false
xKey	x轴从接口返回数据中对应的key值	String	-	-
dKey	y轴从接口返回数据中对应的key值	String	-	-
isXnull	x轴数据是否为空	Boolean	-	true

当isXnull为false时表示，x轴数据为静态数据，接口获取数据后不会在处理x轴数据

出参

参数	说明	类型	可选值	默认值
loading	接口loading状态	Boolean	-	false

源码

import { onMounted } from '@vue/composition-api'
import { getBaseBar } from '@/consts/baseBar'
import useCharts from '../useCharts'
import useTimeout from '../useTimeout'
import useAsync from '../useAsync'

/**
 * 场景：适用于目前ui设计通用柱状图（参考赊销总览柱状图），若有差异需额外扩展或另外封装
 * @param xKey x轴数据接收对应key
 * @param dKey 数据接收时对应key
 * @param id dom-id
 * @param request 接口请求
 * @param option charts配置
 * @param isInit 是否初始化调用
 * @param isXnull x轴数据是否为[]，默认为true
 */

export default ({
  xKey,
  dKey,
  id,
  request,
  option = getBaseBar(),
  isInit = false,
  isXnull = true
}) => {
  // perTimeout
  const { perTimeout } = useTimeout()
  // chart
  const {
    setDataSource,
    setxData,
    chartInit
  } = useCharts({
    option,
    id,
    isInit
  })
  // 成功回调
  const successCallBack = ({ code, data }) => {
    if (code === '0') {
      // 此处处理后端返回数据差异，需前后端约定好
      const xData = []
      const opData = []
      // 默认x轴数据为[]
      (data || []).forEach(item => {
        isXnull && xData.push(item[xKey])
        opData.push(item[dKey])
      })
      isXnull && setxData(xData)
      setDataSource(opData)
      return true
    } else {
      return false
    }
  }
  // 获取&处理数据
  const { doResult, loading } = useAsync({
    request,
    init: false,
    successCallBack
  })

  onMounted(() => doResult().then(val => val && perTimeout(chartInit)))

  return {
    loading
  }
}

结语

组合式Api可以很好的加深我们对解耦、聚合的理解