vue3.0组合式API-useCharts

更多文章

前言

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

介绍

useCharts是针对echarts图表类公共逻辑的抽离，useCharts只是一个基类，比如useBar是在当前业务场景下基于useCharts封装的

默认图表会初始化chart，窗口变化会重新绘画保证图表自适应，组件卸载时会取消chart绑定的事件，置空chart实例，取消监听的窗口resize事件

后续使用到的配置数据如下：

// 仪表盘-option
const option = {
  series: [{
    type: 'gauge',
    progress: { show: true, width: 20 },
    color: ['#25BECD'],
    splitLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false },
    axisLine: { lineStyle: { width: 20 } },
    detail: {
      valueAnimation: true,
      fontSize: 30,
      fontWeight: 'normal',
      offsetCenter: [0, '30%'],
      formatter: '{value}%',
    },
    data: [{ value: 0 }]
  }]
}
复制代码

基础使用

import useCharts from '@/hooks/useCharts'

// id为dom-id选择器
useCharts({
  option,
  id: 'custom_test'
})
复制代码

异步初始化

通常我们需要从接口获取到数据后再进行初始化

import useCharts from '@/hooks/useCharts'
import useAsync from '@/hooks/useAsync'
import useTimeout from '@/hooks/useTimeout'
// 这里用到了我们之前封装的useAsync和useTimeout
// setDataSource: 更新series配置中的data
// chartInit: 手动初始化chart
const { perTimeout } = useTimeout()
const {
  chartInit,
  setDataSource
} = useCharts({
  option,
  id: 'custom_test',
  isInit: false
})
// 调用接口获取数据
const { doResult, loading } = useAsync({
  request,
  init: false,
  successCallBack: ({ code, data }) => {
    code === '0' && setDataSource(data)
    code === '0' && perTimeout(chartInit())
  }
})
// 需要获取dom，所以在onMounted调用接口
onMounted(() => doResult(params))
复制代码

非自适应

对于有些图表并不需要随着窗口的变化而变化，将isResize设置为false即可

import useCharts from '@/hooks/useCharts'

// id为dom-id选择器
useCharts({
  option,
  id: 'custom_test'，
  isResize: false
})
复制代码

charts事件

根据目前业务场景，useCharts暂时提供了mouseover和mouseout两个事件，若无法满足可自行扩展

useCharts({
  option,
  id: 'custom_test'，
  mouseover: () => console.log('mouseover'),
  mouseout: () =>  console.log('mouseout')
})
复制代码

手动重绘

// 当需要重新绘画时调用chartResize即可
const { chartResize } = useCharts({
  option,
  id: 'custom_test',
})

const rePayHandle = () => chartResize()

复制代码

手动清空

// 当需要清空时调用chartClear即可，chartClear会将绑定的事件、charts实例清空
const { chartClear } = useCharts({
  option,
  id: 'custom_test',
})

const rePayHandle = () => chartClear()

复制代码

入参

出参

源码

import { onBeforeUnmount, onMounted, ref } from '@vue/composition-api'
import * as echarts from 'echarts/core'
import useTimeout from './useTimeout'

/**
 * 场景：适用于charts(针对项目中的echarts)，若有差异需额外扩展或另外封装
 * @param option charts配置
 * @param id dom-id
 * @param mouseover 鼠标滑过事件
 * @param mouseout 鼠标滑出事件
 * @param isInit 是否初始化调用
 * @param isResize 窗口变化是否允许重画charts
 */

export default ({
  option,
  id,
  mouseover,
  mouseout,
  isInit = true,
  isResize = true
}) => {
  const myChart = ref(null)
  const initOption = ref(option)
  const { perTimeout } = useTimeout()
  // 初始化
  const chartInit = () => {
    const el = document.getElementById(id)
    if (!myChart.value && el) {
      myChart.value = echarts.init(el)
      setOption()
      myChart.value && mouseover && myChart.value.on('mouseover', mouseover)
      myChart.value && mouseout && myChart.value.on('mouseout', mouseout)
    }
  }
  // 重置
  const chartResize = () => {
    myChart.value && myChart.value.resize()
  }
  // 设置series-data
  const setDataSource = (dataSource = [], index = 0) => {
    const { value: { series } } = initOption
    series[index].data = dataSource
  }
  // 设置xAxis-data，对于动态设置x轴数据的，调用setxData后再调用chartInit方法
  const setxData = (dataSource = []) => {
    const { value: { xAxis } } = initOption
    xAxis.data = dataSource
  }
  // 对整个option赋值
  const setOption = (data = null) => {
    if (data) initOption.value = data
    myChart.value && myChart.value.setOption(initOption.value)
  }
  // window-resize
  const windowResize = () => isResize && perTimeout(chartResize)
  // 清空
  const chartClear = () => {
    myChart.value && myChart.value.off('mouseover')
    myChart.value && myChart.value.off('mouseout')
    perTimeout(() => { myChart.value = null })
  }
  // 是否初始化chart
  onMounted(() => isInit && chartInit())
  // 窗口变化重置charts
  window.addEventListener('resize', windowResize)
  // 销毁
  onBeforeUnmount(() => {
    window.removeEventListener('resize', windowResize)
    chartClear()
  })

  return {
    chartInit,
    chartResize,
    chartClear,
    setxData,
    setDataSource,
    setOption,
  }
}
复制代码

结语

之后我们继续分享基于useCharts封装的useBar，useBar是对追旅目前业务里的柱状图的封装