408 lines
9.8 KiB
Plaintext
408 lines
9.8 KiB
Plaintext
import { historyStat,rateHistoryStat,historyMarketSevenDay,historyStatSevenDay} from '@/api/daikin/base'
|
|
import type { EChartsOption } from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
import {calculateDateIntervals} from '@/utils/format'
|
|
|
|
|
|
|
|
const state = reactive<any>({
|
|
type: 'Cu',
|
|
})
|
|
const state1 = reactive<any>({
|
|
currencyCodeFrom:'CNA',
|
|
currencyCodeTo:'USD',
|
|
})
|
|
const state2 = reactive<any>({
|
|
currencyCodeFrom:'CNA',
|
|
currencyCodeTo:'USD',
|
|
})
|
|
const state3 = reactive<any>({
|
|
currencyCodeFrom:'USD',
|
|
currencyCodeTo:'CNA',
|
|
})
|
|
const state4 = reactive<any>({
|
|
number:'Cu',
|
|
type: '2',
|
|
dateList:calculateDateIntervals('','').list,
|
|
startTime:'',
|
|
endTime:'',
|
|
})
|
|
const state5 = reactive<any>({
|
|
currencyCodeFrom:'CNA',
|
|
currencyCodeTo:'JPY',
|
|
type: '2',
|
|
dateList:calculateDateIntervals('','').list,
|
|
startTime:'',
|
|
endTime:'',
|
|
})
|
|
|
|
function getDay(){
|
|
const today = new Date();
|
|
const pastSevenDays = [];
|
|
|
|
for (let i = 6; i >= 0; i--) {
|
|
const date = new Date(today);
|
|
date.setDate(today.getDate() - i);
|
|
pastSevenDays.push(date.toISOString().split('T')[0]);
|
|
}
|
|
|
|
return pastSevenDays;
|
|
}
|
|
|
|
function reverseArray(inputArray: string | any[],star: number,enc: number) {
|
|
const reversedArray = [];
|
|
|
|
for (let i = 0; i <= inputArray.length - 1; i++) {
|
|
reversedArray.push(inputArray[i].substring(star,enc));
|
|
}
|
|
|
|
return reversedArray;
|
|
}
|
|
export function Chart1() {
|
|
|
|
const chartRef = ref()
|
|
const optionRef = ref()
|
|
async function getDat() {
|
|
const {data} = await historyMarketSevenDay({number:state.type})
|
|
if(!data) return
|
|
let {LME,SMM} = data[state.type]
|
|
|
|
const option = {
|
|
|
|
height: '150px', // 设置图表高度为 400 像素
|
|
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ["SMM", "LME"],
|
|
right: 20,
|
|
top: 10,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: reverseArray(getDay(),5,10)
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// name:'1',
|
|
},
|
|
{
|
|
// name:'2',
|
|
type: 'value',
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: 'SMM',
|
|
data: SMM,
|
|
color: '#8F97F8',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
},
|
|
{
|
|
name: 'LME',
|
|
data: LME,
|
|
type: 'line',
|
|
color: '#FF603A',
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
}
|
|
]
|
|
|
|
}
|
|
optionRef.value = option
|
|
}
|
|
const ss = computed(() => [state.type])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
console.log(state.type)
|
|
getDat()
|
|
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
|
|
return { chartRef, option: optionRef, state }
|
|
}
|
|
|
|
|
|
export function Chart3() {
|
|
const chartRef = ref()
|
|
const optionRef = ref<any>({});
|
|
|
|
async function getDat() {
|
|
const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo})
|
|
if(!data) return
|
|
const dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo]
|
|
|
|
const option = {
|
|
|
|
height: '150px', // 设置图表高度为 400 像素
|
|
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
|
|
right: 20,
|
|
top: 10,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: reverseArray(getDay(),8,10)
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
|
|
data: dat,
|
|
color: '#8F97F8',
|
|
type: 'line',
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
},
|
|
]
|
|
}
|
|
|
|
|
|
optionRef.value = option;
|
|
}
|
|
const ss = computed(() => [state2.currencyCodeFrom,state2.currencyCodeTo])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
console.log(state2.type)
|
|
getDat()
|
|
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
return { chartRef, option: optionRef, state2 }
|
|
}
|
|
|
|
|
|
export function Chart4() {
|
|
|
|
const chartRef = ref()
|
|
const optionRef = ref<any>({});
|
|
|
|
async function getDat() {
|
|
const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo})
|
|
if(!data) return
|
|
const dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo]
|
|
|
|
const option = {
|
|
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
|
|
|
height: '150px', // 设置图表高度为 400 像素
|
|
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
|
|
right: 20,
|
|
top: 10,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: reverseArray(getDay(),8,10)
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
|
|
data: dat,
|
|
color: '#8F97F8',
|
|
type: 'line',
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}
|
|
|
|
optionRef.value = option;
|
|
}
|
|
const ss = computed(() => [state3.currencyCodeFrom,state3.currencyCodeTo])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
console.log(state3.type)
|
|
|
|
getDat()
|
|
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
return { chartRef, option: optionRef, state3 }
|
|
}
|
|
|
|
export function Chart5() {
|
|
const chartRef = ref()
|
|
const optionRef = ref<any>({});
|
|
let nameX: string[]
|
|
async function dataList() {
|
|
let SMM,LME
|
|
const {data} = await historyStat({number:state4.number,type:state4.type,dateList:state4.dateList})
|
|
if(data&&data[state4.number]){
|
|
SMM=data[state4.number].SMM
|
|
LME = data[state4.number].LME
|
|
}
|
|
|
|
|
|
const option = {
|
|
// width: '250px', // 设置图表宽度为 800 像素
|
|
// height: '150px', // 设置图表高度为 400 像素
|
|
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ["SMM", "LME"],
|
|
right: 20,
|
|
top: 10,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data:nameX
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// name:'1',
|
|
},
|
|
{
|
|
// name:'2',
|
|
type: 'value',
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: 'SMM',
|
|
data: SMM,
|
|
color: '#FF9307',
|
|
type: 'line',
|
|
smooth: true
|
|
},
|
|
{
|
|
name: 'LME',
|
|
data: LME,
|
|
type: 'line',
|
|
color: '#0063ED',
|
|
smooth: true,
|
|
yAxisIndex: 1,
|
|
}
|
|
]
|
|
|
|
|
|
}
|
|
optionRef.value = option;
|
|
}
|
|
const ss = computed(() => [state4.number,state4.startTime,state4.endTime])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
|
|
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
|
|
const {type,list} = calculateDateIntervals(state4.startTime,state4.endTime)
|
|
nameX =list
|
|
state4.dateList = list
|
|
state4.type = type
|
|
console.log(state4.number)
|
|
dataList()
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
return { chartRef, option: optionRef, state4 }
|
|
}
|
|
|
|
export function Chart6() {
|
|
const chartRef = ref()
|
|
const optionRef = ref<any>({});
|
|
|
|
let nameX: string[]
|
|
async function getDat() {
|
|
const {data} = await rateHistoryStat({currencyCodeFrom:state5.currencyCodeFrom,currencyCodeTo:state5.currencyCodeTo,type:state5.type,dateList:state5.dateList})
|
|
const dat = data[state5.currencyCodeFrom+'-'+state5.currencyCodeTo]
|
|
const option = {
|
|
// width: '250px', // 设置图表宽度为 800 像素
|
|
// height: '150px', // 设置图表高度为 400 像素
|
|
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
// legend: {
|
|
// data:state5.currencyCodeFrom-state5.currencyCodeTo,
|
|
// right: 20,
|
|
// top: 10,
|
|
// },
|
|
xAxis: {
|
|
type: 'category',
|
|
data:nameX
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: state5.currencyCodeFrom+'-'+state5.currencyCodeTo,
|
|
data: dat,
|
|
color: '#89DF75',
|
|
type: 'line',
|
|
smooth: true
|
|
},
|
|
]
|
|
}
|
|
optionRef.value = option;
|
|
}
|
|
const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
const {type,list} = calculateDateIntervals(state5.startTime,state5.endTime)
|
|
|
|
nameX =list
|
|
state5.dateList = list
|
|
state5.type = type
|
|
getDat()
|
|
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
return { chartRef, option: optionRef, state5 }
|
|
} |