说明
封装了基本的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
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
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