Skip to content

Y
yudao-admin-ui
Commit e898d322 by licheng
Options

test: 高频大数据波形图验证

parent 7f91efbd
Showing with 269 additions and 46 deletions
package.json
......@@ -45,7 +45,7 @@
"dayjs": "^1.11.10",
"diagram-js": "^12.8.0",
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts": "^6.0.0",
"echarts-wordcloud": "^2.1.0",
"element-plus": "2.9.1",
"fast-xml-parser": "^4.3.2",
......
pnpm-lock.yaml
......@@ -69,11 +69,11 @@ importers:
specifier: ^1.3.1
version: 1.3.1
echarts:
specifier: ^5.5.0
version: 5.5.1
specifier: ^6.0.0
version: 6.0.0
echarts-wordcloud:
specifier: ^2.1.0
version: 2.1.0(echarts@5.5.1)
version: 2.1.0(echarts@6.0.0)
element-plus:
specifier: 2.9.1
version: 2.9.1(vue@3.5.12(typescript@5.3.3))
......@@ -3015,8 +3015,8 @@ packages:
peerDependencies:
echarts: ^5.0.1
echarts@5.5.1:
resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
echarts@6.0.0:
resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
ejs@3.1.10:
resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
......@@ -5153,8 +5153,8 @@ packages:
zeebe-bpmn-moddle@1.7.0:
resolution: {integrity: sha512-eZ6OXSt0c4n9V/oN/46gTlwDIS3GhWQLt9jbM5uS/YryB4yN8wdrrKrtw+TpyNy0SSKWXNDHyC83nCA2blPO3Q==}
zrender@5.6.0:
resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
zrender@6.0.0:
resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
snapshots:
......@@ -8303,14 +8303,14 @@ snapshots:
eastasianwidth@0.2.0: {}
echarts-wordcloud@2.1.0(echarts@5.5.1):
echarts-wordcloud@2.1.0(echarts@6.0.0):
dependencies:
echarts: 5.5.1
echarts: 6.0.0
echarts@5.5.1:
echarts@6.0.0:
dependencies:
tslib: 2.3.0
zrender: 5.6.0
zrender: 6.0.0
ejs@3.1.10:
dependencies:
......@@ -10542,6 +10542,6 @@ snapshots:
zeebe-bpmn-moddle@1.7.0: {}
zrender@5.6.0:
zrender@6.0.0:
dependencies:
tslib: 2.3.0
src/components/Echart/src/Echart.vue
......@@ -62,7 +62,10 @@ const styles = computed(() => {
const initChart = () => {
if (unref(elRef) && props.options) {
echartRef = echarts.init(unref(elRef) as HTMLElement)
echartRef = echarts.init(unref(elRef) as HTMLElement, null, {
renderer: 'canvas',
useDirtyRect: true // 启用脏矩形优化
})
echartRef?.setOption(unref(options))
}
}
......@@ -71,7 +74,13 @@ watch(
() => options.value,
(options) => {
if (echartRef) {
echartRef?.setOption(options)
const startTime = performance.now()
echartRef.setOption({
xAxis: { data: options.xAxis.data },
series: options.series
})
const endTime = performance.now()
console.log(`ECharts 更新耗时: ${(endTime - startTime).toFixed(2)}ms`)
}
},
{
......@@ -81,10 +90,12 @@ watch(
const resizeHandler = debounce(() => {
if (echartRef) {
const startTime = performance.now()
echartRef.resize()
const endTime = performance.now()
console.log(`ECharts 重绘耗时: ${(endTime - startTime).toFixed(2)}ms`)
}
}, 100)
const contentResizeHandler = async (e: TransitionEvent) => {
if (e.propertyName === 'width') {
resizeHandler()
......
src/views/Home/echarts-data.ts
......@@ -4,24 +4,12 @@ const { t } = useI18n()
export const lineOptions: EChartsOption = {
title: {
text: t('analysis.monthlySales'),
text: '波形图',
left: 'center'
},
xAxis: {
data: [
t('analysis.january'),
t('analysis.february'),
t('analysis.march'),
t('analysis.april'),
t('analysis.may'),
t('analysis.june'),
t('analysis.july'),
t('analysis.august'),
t('analysis.september'),
t('analysis.october'),
t('analysis.november'),
t('analysis.december')
],
type: 'category',
data: [],
boundaryGap: false,
axisTick: {
show: false
......@@ -30,7 +18,7 @@ export const lineOptions: EChartsOption = {
grid: {
left: 20,
right: 20,
bottom: 20,
bottom: 50,
top: 80,
containLabel: true
},
......@@ -42,31 +30,57 @@ export const lineOptions: EChartsOption = {
padding: [5, 10]
},
yAxis: {
type: 'value',
axisTick: {
show: false
}
},
legend: {
data: [t('analysis.estimate'), t('analysis.actual')],
data: ['data1'],
top: 50
},
series: [
toolbox: {
feature: {
dataZoom: {
// yAxisIndex: 'none'
show: true
},
restore: {},
saveAsImage: {}
}
},
// 缩放图例（需导入 dataZoom）
dataZoom: [
{
name: t('analysis.estimate'),
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
type: 'inside', // 内部缩放
start: 0,
end: 100
},
{
name: t('analysis.actual'),
smooth: true,
start: 0,
end: 100
}
],
animation: false, // 禁用动画
progressive: 1000, // 每次增量渲染的数据量
progressiveThreshold: 5000, // 总数据量超过此值触发增量渲染
series: [
{
name: 'data1',
smooth: false, // 是否平滑曲线
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
showSymbol: false, // 不显示数据点
progressive: 1000, // 每次增量渲染的数据量
progressiveThreshold: 5000, // 总数据量超过此值触发增量渲染
animation: false, // 关闭动画
lineStyle: {
width: 1 // 细线
},
sampling: 'lttb', // 使用 LTTB 采样算法
// samplingThreshold: 10000, // 采样阈值，超过此值将进行采样
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123]
// animationDuration: 2800, // 动画持续时间
// animationEasing: 'cubicInOut' // 动画缓动效果
}
]
}
......
src/views/Home/test1.vue 0 → 100644
<template>
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="4" animated>
<Echart :height="350" :options="lineOptionsData" />
</el-skeleton>
</el-card>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import 'echarts/lib/component/dataZoom'
import { lineOptions } from './echarts-data'
defineOptions({ name: 'Home2' })
const { t } = useI18n()
const loading = ref(true)
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
let data: any[] = [] // 波形图数据
// 初始数据
const getLineData = async () => {
// data = createData(1000000, 1)
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(lineOptionsData, 'series', [
{
name: 'data1',
smooth: false, // 是否平滑曲线
type: 'line',
showSymbol: false, // 不显示数据点
progressive: 1000, // 每次增量渲染的数据量
progressiveThreshold: 5000, // 总数据量超过此值触发增量渲染
lineStyle: {
width: 1 // 细线
},
sampling: 'lttb', // 使用 LTTB 采样算法降低数据量
// samplingThreshold: 10000, // 采样阈值，超过此值将进行采样
animation: false, // 动画
animationDuration: 1000, // 动画持续时间
animationEasing: 'linear', // 动画缓动效果
data: data.map((v) => v.data1)
}
// {
// name: 'data2',
// smooth: false, // 是否平滑曲线
// type: 'line',
// showSymbol: false, // 不显示数据点
// progressive: 1000, // 每次增量渲染的数据量
// progressiveThreshold: 5000, // 总数据量超过此值触发增量渲染
// animation: false, // 关闭动画
// lineStyle: {
// width: 0.5 // 细线
// },
// sampling: 'lttb', // 使用 LTTB 采样算法
// samplingThreshold: 10000, // 采样阈值，超过此值将进行采样
// data: data.map((v) => v.data2)
// }
])
}
const connect = () => {
// 连接到 WebSocket 服务器
const socket = new WebSocket('ws://localhost:8080')
// 监听连接成功
socket.addEventListener('open', (event) => {
console.log('WebSocket 连接成功')
})
// 接收服务器消息
socket.addEventListener('message', (event) => {
const newData = JSON.parse(event.data)
// 更新图表数据
const newXAxisData = [...lineOptionsData!.xAxis!.data, ...newData.map((item) => item.name)]
console.log(newXAxisData.length)
set(lineOptionsData, 'xAxis.data', newXAxisData)
set(lineOptionsData, 'series', [
{
name: 'data1',
smooth: false,
type: 'line',
// 启用大数据优化
progressive: 1000,
progressiveThreshold: 5000,
showSymbol: false, // 不显示数据点
lineStyle: {
width: 0.5 // 细线
},
sampling: 'lttb', // 使用 LTTB 采样算法
animation: false, // 动画
animationDuration: 1000, // 动画持续时间
animationEasing: 'linear', // 动画缓动效果
data: [...lineOptionsData!.series![0].data, ...newData.map((item) => item.data1)]
}
// {
// name: 'data2',
// smooth: false,
// type: 'line',
// itemStyle: {},
// // 启用大数据优化
// progressive: 1000,
// progressiveThreshold: 5000,
// lineStyle: {
// width: 0.5 // 细线
// },
// data: [...lineOptionsData.series[1].data, ...newData.map((item) => item.data2)]
// }
])
})
}
const getAllApi = async () => {
await getLineData()
loading.value = false
connect()
}
getAllApi()
interface DataItem {
[key: string]: number | string
name: string
}
function formatDate(date: Date, format: string): string {
const pad = (num: number) => num.toString().padStart(2, '0')
return format
.replace('HH', pad(date.getHours()))
.replace('mm', pad(date.getMinutes()))
.replace('ss', pad(date.getSeconds()))
}
function createData(
count: number,
dataCount: 1 | 2 | 3 = 2,
minValue: number = 50,
maxValue: number = 250
): DataItem[] {
const result: DataItem[] = []
const now = new Date()
// 生成时间点（从当前时间往前递减）
const timeStamps: Date[] = []
for (let i = count - 1; i >= 0; i--) {
const time = new Date(now.getTime() - i * 1000)
timeStamps.push(time)
}
// 初始化各数据项的值和方向
const dataValues: Record<string, number> = {}
const dataDirections: Record<string, number> = {}
for (let i = 1; i <= dataCount; i++) {
const key = `data${i}`
dataValues[key] = minValue + Math.random() * (maxValue - minValue) // 初始随机值
dataDirections[key] = Math.random() > 0.5 ? 1 : -1 // 随机初始方向
}
for (let i = 0; i < count; i++) {
const item: DataItem = { name: formatDate(timeStamps[i], 'HH:mm:ss') }
// 为每个数据项生成波形数据
for (let j = 1; j <= dataCount; j++) {
const key = `data${j}`
const change = 10 + Math.random() * 30 // 变化幅度10~40（可调整）
// 随机决定是否改变方向（更自然的波动）
if (Math.random() < 0.2) {
// 20%概率改变方向
dataDirections[key] *= -1
}
dataValues[key] += dataDirections[key] * change
// 限制在合理范围内（但不强制反转）
dataValues[key] = Math.max(
minValue * 0.9, // 允许稍微低于最小值（避免卡边界）
Math.min(maxValue * 1.1, dataValues[key]) // 允许稍微高于最大值
)
item[key] = Math.round(dataValues[key])
}
result.push(item)
}
return result
}
</script>
<style lang="scss" scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment