说明
定时滚动EChart的数据，提供可自动滚动的图表数据
示例
函数定义
function({
showCount: number // 每次显示的数量
scrollCount: number // 每次向后滚动的数量
interval?: number // 滚动间隔，默认10000ms
seamless?: boolean // 是否无缝滚动，默认true
chartData: unknown[] // 图表数据
}, cb: (chartData: unknown[]) => void): {
startScroll: () => void // 开始滚动
stopScroll: () => void // 停止滚动
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Demo代码
<template show-source>
<div ref="chartContainer" class="echart-container"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useEChart, useScrollEChartData } from '../'
export default defineComponent({
setup() {
const chartData = [
{ label: '2002', value: 23 },
{ label: '2004', value: 53 },
{ label: '2006', value: 63 },
{ label: '2008', value: 13 },
{ label: '2010', value: 93 },
{ label: '2012', value: 50 },
{ label: '2014', value: 43 },
{ label: '2016', value: 29 },
{ label: '2018', value: 43 },
{ label: '2020', value: 29 },
]
const { chartContainer, setChartOption, addChartEvent } = useEChart()
const renderChart = (chartData: any[]) => {
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
},
extraCssText: 'border-radius: 0;',
formatter: (params: any) => `
<div style="backgroundColor:#fff;borderRaduis:0">
${params[0].marker}
<span>${params[0].axisValue} <span style="font-weight: bold; margin-left: 30px">${params[0].value}</span></span>
</div>
`,
},
grid: {
top: '10',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true,
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
type: 'solid',
color: '#2B394E',
},
},
axisLabel: {
fontSize: 12,
color: '#6F8EA8',
lineHeight: 20,
margin: 5,
},
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: '#2B394E',
},
},
data: chartData.map(d => d.label),
},
yAxis: {
type: 'value',
splitNumber: 3,
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#2B394E',
},
},
axisLabel: {
fontSize: 12,
color: '#6F8EA8',
lineHeight: 20,
},
},
series: [
{
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#71F8FC' },
{ offset: 1, color: 'rgba(0,250,255,0.16)' },
]),
borderRadius: [2, 2, 0, 0],
},
barWidth: 16,
showBackground: true,
backgroundStyle: {
color: 'rgba(56,75,103,0.16)',
},
data: chartData.map(d => d.value),
type: 'bar',
},
],
}
setChartOption(option)
}
const { startScroll, stopScroll } = useScrollEChartData({
showCount: 6,
scrollCount: 2,
interval: 5000,
chartData: chartData,
}, renderChart)
onMounted(() => {
startScroll()
addChartEvent('mouseover', stopScroll)
addChartEvent('mouseout', startScroll)
})
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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133