vue3 项目使用Echarts使用记录

1
import type { ShallowRef } from 'vue'
2
import { onMounted, ref } from 'vue'
3
import { debounce } from 'lodash'
4
import type { EChartsType } from 'echarts/types/dist/core'
5
import { type ECOption, echarts } from '@/utils/echarts'
6
import type {
7
  DataZoomComponentOption,
8
  LegendComponentOption,
9
  LineSeriesOption,
10
  XAXisOption,
11
  YAXisOption,
12
} from 'echarts/types/dist/shared'
13
/** category 默认配色 来源：https://github.com/antvis/G2/blob/v5/src/theme/light.ts */
14
export const CATEGORY_COLORS: string[] = [
15
  '#1783FF',
16
  '#F0884D',
17
  '#D580FF',
18
  '#7863FF',
19
  '#60C42D',
20
  '#BD8F24',
21
  '#FF80CA',
22
  '#2491B3',
23
  '#17C76F',
24
]
25

26
export default function useChart(props, customOptions?: ECOption) {
27
  /** 所有图表的默认配置 */
28
  const DEFAULT_OPTIONS: ECOption = {
29
    series: [
30
      {
31
        name: '数量',
32
        type: 'line',
33
        emphasis: {
34
          focus: 'self',
35
        },
36
        label: {
37
          show: true,
38
          position: 'inside',
39
          color: '#fff',
40
        },
41
        data: props.data,
42
      },
43
    ],
44
    xAxis: [
45
      {
46
        type: 'category',
47
        axisTick: {
48
          show: false,
49
        },
50
        data: props.xAxisData,
51
      },
52
    ],
53
    yAxis: [
54
      {
55
        type: 'value',
56
        minInterval: 1,
57
      },
58
    ],
59
    legend: {
60
      show: true,
61
      type: 'scroll',
62
      orient: 'horizontal',
63
      top: 25,
64
      left: 'center',
65
    },
66
  }
67
  // 要渲染的Dom元素
68
  const chartDom: Ref<HTMLDivElement | null> = ref(null)
69
  // 渲染的chart对象要用shallowRef
70
  const chart: ShallowRef<EChartsType | null | undefined> = shallowRef(null)
71

72
  const getHeight = computed(() => {
73
    return typeof props.height === 'number' ? `${props.height}px` : props.height
74
  })
75

76
  watch(() => props, drawChart, {
77
    deep: true,
78
  })
79

80
  // 绘制
81
  function drawChart() {
82
    const getSingleOption = (type) =>
83
      props[type] ? props[type] : customOptions?.[type] || DEFAULT_OPTIONS[type]
84

85
    const series: LineSeriesOption[] = getSingleOption('series')
86
    const xAxis: XAXisOption[] = getSingleOption('xAxis')
87
    const yAxis: YAXisOption[] = getSingleOption('yAxis')
88
    const legend: LegendComponentOption = getSingleOption('legend')
89
    const dataZoom: DataZoomComponentOption[] = getSingleOption('dataZoom')
90

91
    const options: ECOption = {
92
      // category自定义颜色
93
      // https://echarts.apache.org/zh/option.html#color
94
      color: CATEGORY_COLORS,
95
      backgroundColor: 'transparent',
96
      tooltip: {
97
        trigger: 'axis',
98
        axisPointer: {
99
          type: 'shadow',
100
        },
101
      },
102
      legend,
103
      grid: {
104
        left: 10,
105
        right: 10,
106
        bottom: props.dataZoom ? 40 : 10,
107
        containLabel: true,
108
      },
109
      // 右上角工具栏
110
      toolbox: {
111
        show: false,
112
        feature: {
113
          magicType: {
114
            type: ['line', 'bar'],
115
          },
116
          dataView: {
117
            readOnly: false,
118
          },
119
          saveAsImage: {},
120
        },
121
      },
122
      dataset: {
123
        source: props.datasetSource,
124
      },
125
      xAxis,
126
      yAxis,
127
      dataZoom,
128
      series,
129
    }
130
    // 开启notMerge保证配置数据不会叠加
131
    chart.value?.setOption(options, {
132
      notMerge: true,
133
    })
134
  }
135

136
  // 使用防抖debounce函数，减少resize的次数
137
  const chartResizeHandler = debounce(() => chart.value?.resize(), 100)
138
  onMounted(() => window.addEventListener('resize', chartResizeHandler))
139
  onBeforeUnmount(() =>
140
    window.removeEventListener('resize', chartResizeHandler)
141
  )
142

143
  onMounted(() => {
144
    chart.value = echarts.init(chartDom.value)
145
    drawChart()
146
  })
147

148
  return {
149
    chartDom,
150
    getHeight,
151
  }
152
}