# 在 Vue3 中使用 echarts
地址
vue (opens new window): 3.2.6 版本
echarts (opens new window): 5.3.3 版本
echarts-liquidfill (opens new window): 3.1.0 版本（水球图，个人觉得非常不错）
# 用水球图作为使用案例
<template>
<div ref="echartsRef" class="water-polo-echart"></div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { onMounted, onUnmounted, shallowRef } from 'vue';
export default {
props: {
data: Object // 后续新要求自己添加参数修改组件，目前只考虑常用
},
setup(props) {
/**
* shallowRef 能够创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的
* 使用ref时，框架对属性的代理，会影响到ECharts实例底层的运行，所以建议使用shallowRef
* github参考地址：https://github.com/apache/echarts/issues/14974#issuecomment-842796847
*/
const echartsRef = shallowRef();
const myChart = shallowRef();
onMounted(() => {
myChart.value = echarts.init(echartsRef.value);
myChart.value.setOption({
title: {
text: props.data.title,
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20
},
top: '5%',
left: 'center',
subtext: props.data.subtitle
},
backgroundColor: '#0F224C',
graphic: [{
type: 'text',
left: 'center',
bottom: '5%',
style: {
fill: '#6e7079',
text: props.data.graphicText
}
}],
series: [
{
type: 'liquidFill',
radius: '65%',
center: ['50%', '55%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5'
},
{
offset: 1,
color: '#2ca3e2'
}
],
globalCoord: false
}
],
data: props.data.value, // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)'
},
label: {
normal: {
textStyle: {
fontSize: 50,
color: '#fff'
}
}
},
outline: {
show: false,
borderDistance: 10,
itemStyle: {
borderWidth: 2,
borderColor: '#112165'
}
}
}
]
});
});
onUnmounted(() => {
myChart.value.dispose();
});
const resize = () => {
myChart.value.resize();
};
return {
resize,
echartsRef
};
}
};
</script>
<style lang="less" scoped>
.water-polo-echart {
flex: 1;
min-width: 400px;
height: 400px;
}
</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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117