88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<template>
|
|
<div ref="chart" style="width: 500px; height: 300px;"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
|
|
|
|
export default {
|
|
name: 'EChartsComponent',
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
dataType: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
this.initChart();
|
|
this.getTkhostdetail();
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
const myChart = echarts.init(this.$refs.chart);
|
|
const option = {
|
|
title: {
|
|
text: this.title
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
data: ['销量']
|
|
},
|
|
xAxis: {
|
|
data: ['2025-03-29', '2025-03-30', '2025-03-31', '2025-04-01', '2025-04-02', '2025-04-03']
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
name: '金币数',
|
|
type: 'line',
|
|
data: [23266, 12144, 44467, 86686, 35637, 34534],
|
|
smooth: true
|
|
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
getTkhostdetail() {
|
|
tkhostdetail({
|
|
hostId: this.id,
|
|
dataType: this.dataType,
|
|
searchTimeStart: this.getCurrentDate()[0],
|
|
searchTimeEnd: this.getCurrentDate()[6]
|
|
}).then(res => {
|
|
res[0]
|
|
|
|
})
|
|
},
|
|
getCurrentDate() {
|
|
const dates = [];
|
|
const today = new Date();
|
|
|
|
for (let i = 6; i >= 0; i--) {
|
|
const date = new Date(today);
|
|
date.setDate(today.getDate() - i);
|
|
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
dates.push(`${year}${month}${day}`);
|
|
}
|
|
|
|
return dates;
|
|
}
|
|
|
|
}
|
|
};
|
|
</script> |