说明

封装了基本的EChart操作,统一EChart使用方法

示例



函数定义

function(): {
  setChartOption: (option: any) => void // 设置echart option
  resizeChart: () => void // 重新设置大小
  clearChart: () => void // 清空echart
  getChartRect: () => { width: number; height: number } // 返回echart宽高
  addChartEvent: (name: string, callback: any) => Funtion // 添加事件
  dispatchAction : (payload: echarts.Payload) => void // 添加事件
  chartContainer: Ref<HTMLElement> // 渲染echart的DOM节点
}
1
2
3
4
5
6
7
8
9

Demo代码

<template>
  <div ref="chartContainer" class="echart-container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useEChart } from './'

export default defineComponent({
  setup() {
    const { chartContainer, setChartOption } = useEChart()

    const renderChart = () => {
      const option = {
        grid: {
          top: 10,
          bottom: 20,
          right: 0,
        },
        xAxis: {
          axisLabel: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 12,
            color: '#A1A5B7',
            lineHeight: 20,
            margin: 5,
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#EFF2F5',
            },
          },
          type: 'category',
          data: ['2002', '2004', '2006', '2008', '2010', '2012', '2014', '2016'],
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
          axisLabel: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 12,
            color: '#A1A5B7',
            lineHeight: 20,
          },
          type: 'value',
        },
        series: [{
          itemStyle: {
            color: '#009EF7',
          },
          symbolSize: 6,
          lineStyle: {
            width: 3,
          },
          data: [20, 30, 18, 36, 40, 50, 70, 80],
          type: 'line',
        }],
      }
      setChartOption(option)
    }

    onMounted(() => {
      renderChart()
    })

    return {
      chartContainer,
    }
  },
})
</script>
<style lang="scss" scoped>
.echart-container {
  width: 100%;
  height: 200px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84