update
parent
37675c31ad
commit
a10d0e32d1
|
|
@ -36,6 +36,26 @@ const pageInfo = reactive({
|
|||
pageSize: 10,
|
||||
total: 10
|
||||
})
|
||||
const colorList: any = [
|
||||
'#2592F3',
|
||||
'#EF8C43',
|
||||
'#5FCBC5',
|
||||
'#E5B625',
|
||||
'#E74848',
|
||||
'#8E97F8',
|
||||
'#73ECA5',
|
||||
'#E7CD3B',
|
||||
'#E04E89',
|
||||
'#4EA4E0',
|
||||
'#C34EE0',
|
||||
'#8BCF54',
|
||||
'#56B1FD',
|
||||
'#24BFBA',
|
||||
'#44CF8C',
|
||||
'#6266F8',
|
||||
'#FA6B39',
|
||||
'#F05F96'
|
||||
]
|
||||
const moduleCode = ref()
|
||||
const imoduleCode = ref()
|
||||
const visitDay = ref()
|
||||
|
|
@ -112,7 +132,16 @@ const getDat = async () => {
|
|||
xAxisData.push(item.moduleName)
|
||||
siomesData.push(item.visitCount)
|
||||
})
|
||||
chartOption1.value = Chart1(xAxisData, siomesData)
|
||||
chartOption1.value = Chart1(xAxisData)
|
||||
chartOption1.value.series[0] = {
|
||||
data: siomesData,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex] || '#8F97F8'
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
}
|
||||
}
|
||||
|
||||
const externalList = ref<any>([])
|
||||
|
|
@ -123,17 +152,26 @@ const getExternalTimeStat = async () => {
|
|||
let xAxisData: any[] = []
|
||||
let siomesData: any[] = []
|
||||
data.forEach(
|
||||
(item: { moduleName: any; visitCount: any; moduleCode: any }) => {
|
||||
(
|
||||
item: { moduleName: any; visitCount: any; moduleCode: any },
|
||||
i: number
|
||||
) => {
|
||||
externalObj.value[item.moduleCode] = item.moduleName
|
||||
externalObj.value[item.moduleCode + 'color'] = colorList[9 + i]
|
||||
xAxisData.push(item.moduleName)
|
||||
siomesData.push(item.visitCount)
|
||||
}
|
||||
)
|
||||
chartOption2.value = Chart1(xAxisData, siomesData)
|
||||
console.log(
|
||||
'🚀 ~ file: index.vue:131 ~ Chart1(xAxisData, siomesData):',
|
||||
Chart1(xAxisData, siomesData)
|
||||
)
|
||||
chartOption2.value = Chart1(xAxisData)
|
||||
chartOption2.value.series[0] = {
|
||||
data: siomesData,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[9 + params.dataIndex] || '#8F97F8'
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
}
|
||||
// chartOption2.value.height=3000
|
||||
// chartOption2.value.width=1000
|
||||
}
|
||||
|
|
@ -270,10 +308,21 @@ const barOption = {
|
|||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','hour','month','year'],
|
||||
data: [
|
||||
'Mon',
|
||||
'Tue',
|
||||
'Wed',
|
||||
'Thu',
|
||||
'Fri',
|
||||
'Sat',
|
||||
'Sun',
|
||||
'hour',
|
||||
'month',
|
||||
'year'
|
||||
],
|
||||
axisLabel: {
|
||||
show: false, // 隐藏原始的 x 轴标签
|
||||
interval: 0,
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
|
|
@ -311,7 +360,7 @@ const barOption = {
|
|||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return echartsItemColor[params.dataIndex]
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -327,7 +376,6 @@ const handleChild = async (data: any) => {
|
|||
multipleSelection.value.forEach((i: { userId: any }) => {
|
||||
userIdList.push(i.userId)
|
||||
})
|
||||
console.log("🚀 ~ file: index.vue:328 ~ userIdList:", userIdList)
|
||||
}
|
||||
const CloseThiss = (data?: boolean) => {
|
||||
showModal.value = data || false
|
||||
|
|
@ -449,9 +497,10 @@ const isDev = false
|
|||
<div class="overflow-auto h-720px">
|
||||
<div class="mt20px w-full">
|
||||
<span
|
||||
class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold"
|
||||
v-for="(i, e) in dataList"
|
||||
class="cardfoot text-#fff bg-box p30px mx10px my10px text-center text-20px font-bold"
|
||||
:style="{ 'background-color': colorList[e % colorList.length] }"
|
||||
v-if="dataList"
|
||||
v-for="i in dataList"
|
||||
>
|
||||
<span>{{ i.moduleName }}</span
|
||||
><br />
|
||||
|
|
@ -479,11 +528,7 @@ const isDev = false
|
|||
<div class="mt-30px">
|
||||
<div class="flex items-center" v-if="isDev">
|
||||
<span class="text-#000 mr-10px">模块: </span>
|
||||
<el-select
|
||||
v-model="moduleCode"
|
||||
placeholder="选择模块"
|
||||
clearable
|
||||
>
|
||||
<el-select v-model="moduleCode" placeholder="选择模块" clearable>
|
||||
<el-option
|
||||
v-for="item in externalList"
|
||||
:key="item.id"
|
||||
|
|
@ -522,7 +567,11 @@ const isDev = false
|
|||
<p class="text-center mt-10">测试 {{ i }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<VChart class="h-300px w-65% pb-10px ml-auto" key="yyy1" :option="barOption" />
|
||||
<VChart
|
||||
class="h-300px w-65% pb-10px ml-auto"
|
||||
key="yyy1"
|
||||
:option="barOption"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
|
||||
|
|
@ -659,9 +708,10 @@ const isDev = false
|
|||
<div>
|
||||
<div class="mt20px w-full">
|
||||
<span
|
||||
class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold"
|
||||
class="cardfoot text-#fff p30px mx10px my10px text-center text-18px font-bold"
|
||||
:style="{ 'background-color': colorList[9 + e] }"
|
||||
v-if="externalList"
|
||||
v-for="i in externalList"
|
||||
v-for="(i, e) in externalList"
|
||||
>
|
||||
<span>{{ i.moduleName }}</span
|
||||
><br />
|
||||
|
|
@ -687,12 +737,21 @@ const isDev = false
|
|||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// .bg-box{
|
||||
// background-image: url('@/views/home/images/bei.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: center right;
|
||||
// }
|
||||
.cardfoot {
|
||||
display: inline-block;
|
||||
height: 120px;
|
||||
width: 220px;
|
||||
background-image: url('@/assets/images/bg-card.svg');
|
||||
background-size: cover;
|
||||
// background-image: url('@/assets/images/bg-card.svg');
|
||||
background-image: url('@/views/home/images/bei.png');
|
||||
background-size: 60% 100%;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25);
|
||||
}
|
||||
|
|
@ -700,7 +759,9 @@ const isDev = false
|
|||
.cardfoot:hover {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
|
||||
color: #2042b4;
|
||||
// color: #2042b4;
|
||||
color: currentColor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top {
|
||||
|
|
|
|||
|
|
@ -86,11 +86,17 @@ const states = reactive<any>({
|
|||
// return { chartRef, option: optionRef, states }
|
||||
// }
|
||||
|
||||
export function Chart1(xAxisData:any =[],siomesData:any=[],options={}) {
|
||||
export function Chart1(xAxisData: any = [], color = []) {
|
||||
const option = {
|
||||
width: '100%',
|
||||
// height: '450px', // 设置图表高度为 400 像素
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
|
@ -105,13 +111,14 @@ export function Chart1(xAxisData:any =[],siomesData:any=[],options={}) {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
data: siomesData,
|
||||
color: '#8F97F8',
|
||||
type: 'bar',
|
||||
|
||||
data: [],
|
||||
color: function (params: any) {
|
||||
return color[params.dataIndex] || '#8F97F8'
|
||||
},
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
return {...option,...options}
|
||||
return { ...option }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,9 +52,14 @@ onMounted(async ()=>{
|
|||
const {data} =await getCurrencyList()
|
||||
const {data:dat} =await getMetalList()
|
||||
if(dat&&dat!='null'&&dat.length>0){
|
||||
metal.value = dat
|
||||
metal.value = dat.filter((item:any) => {
|
||||
if(["Fe","lengmei"].includes(item.value)){
|
||||
return false
|
||||
}else return item
|
||||
})
|
||||
from.value.label.radio = dat[0].value
|
||||
state4.number = dat[0].value
|
||||
console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
|
||||
}
|
||||
if(data&&data!='null'&&data.length>0){
|
||||
currency.value = data
|
||||
|
|
|
|||
|
|
@ -59,25 +59,30 @@ function reverseArray(inputArray: string | any[],star: number,enc: number) {
|
|||
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]
|
||||
|
||||
SMM = SMM.map((item: any) => (item == 0 ? null : item))
|
||||
LME = LME.map((item: any) => (item == 0 ? null : item))
|
||||
const option = {
|
||||
|
||||
height: '150px', // 设置图表高度为 400 像素
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ["SMM", "LME"],
|
||||
data: ['SMM', 'LME'],
|
||||
right: 20,
|
||||
top: 10,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -85,13 +90,13 @@ async function getDat() {
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: 'value'
|
||||
// name:'1',
|
||||
},
|
||||
{
|
||||
// name:'2',
|
||||
type: 'value',
|
||||
},
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
|
@ -100,64 +105,76 @@ async function getDat() {
|
|||
color: '#8F97F8',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
showDataShadow: true,
|
||||
connectNulls: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'LME',
|
||||
data: LME,
|
||||
type: 'line',
|
||||
color: '#FF603A',
|
||||
showDataShadow: true,
|
||||
connectNulls: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
optionRef.value = option
|
||||
}
|
||||
const ss = computed(() => [state.type])
|
||||
watch(() => unref(ss),
|
||||
watch(
|
||||
() => unref(ss),
|
||||
async (v) => {
|
||||
console.log(state.type)
|
||||
getDat()
|
||||
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
watchEffect(() => {
|
||||
const option = chartRef.value;
|
||||
chartRef.value = option;
|
||||
});
|
||||
const option = chartRef.value
|
||||
chartRef.value = option
|
||||
})
|
||||
|
||||
return { chartRef, option: optionRef, state }
|
||||
}
|
||||
|
||||
|
||||
export function Chart3() {
|
||||
const chartRef = ref()
|
||||
const optionRef = ref<any>({});
|
||||
const optionRef = ref<any>({})
|
||||
|
||||
async function getDat() {
|
||||
const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo})
|
||||
const { data } = await historyStatSevenDay({
|
||||
currencyCodeFrom: state2.currencyCodeFrom,
|
||||
currencyCodeTo: state2.currencyCodeTo
|
||||
})
|
||||
if (!data) return
|
||||
const dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo]
|
||||
const dat = (
|
||||
data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []
|
||||
).map((item: any) => (item == 0 ? null : item))
|
||||
|
||||
const option = {
|
||||
|
||||
height: '150px', // 设置图表高度为 400 像素
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
|
||||
right: 20,
|
||||
top: 10,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -172,46 +189,56 @@ export function Chart3() {
|
|||
data: dat,
|
||||
color: '#8F97F8',
|
||||
type: 'line',
|
||||
showDataShadow: true,
|
||||
connectNulls: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
optionRef.value = option;
|
||||
optionRef.value = option
|
||||
}
|
||||
const ss = computed(() => [state2.currencyCodeFrom, state2.currencyCodeTo])
|
||||
watch(() => unref(ss),
|
||||
watch(
|
||||
() => unref(ss),
|
||||
async (v) => {
|
||||
console.log(state2.type)
|
||||
getDat()
|
||||
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
watchEffect(() => {
|
||||
const option = chartRef.value;
|
||||
chartRef.value = option;
|
||||
});
|
||||
const option = chartRef.value
|
||||
chartRef.value = option
|
||||
})
|
||||
return { chartRef, option: optionRef, state2 }
|
||||
}
|
||||
|
||||
|
||||
export function Chart4() {
|
||||
|
||||
const chartRef = ref()
|
||||
const optionRef = ref<any>({});
|
||||
const optionRef = ref<any>({})
|
||||
|
||||
async function getDat() {
|
||||
const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo})
|
||||
const { data } = await historyStatSevenDay({
|
||||
currencyCodeFrom: state3.currencyCodeFrom,
|
||||
currencyCodeTo: state3.currencyCodeTo
|
||||
})
|
||||
if (!data) return
|
||||
const dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo]
|
||||
const dat = (
|
||||
data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []
|
||||
).map((item: any) => (item == 0 ? null : item))
|
||||
|
||||
const option = {
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
height: '150px', // 设置图表高度为 400 像素
|
||||
|
||||
|
|
@ -221,7 +248,7 @@ export function Chart4() {
|
|||
legend: {
|
||||
data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
|
||||
right: 20,
|
||||
top: 10,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -236,60 +263,70 @@ export function Chart4() {
|
|||
data: dat,
|
||||
color: '#8F97F8',
|
||||
type: 'line',
|
||||
showDataShadow: true,
|
||||
connectNulls: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
optionRef.value = option;
|
||||
optionRef.value = option
|
||||
}
|
||||
const ss = computed(() => [state3.currencyCodeFrom, state3.currencyCodeTo])
|
||||
watch(() => unref(ss),
|
||||
watch(
|
||||
() => unref(ss),
|
||||
async (v) => {
|
||||
console.log(state3.type)
|
||||
|
||||
getDat()
|
||||
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
watchEffect(() => {
|
||||
const option = chartRef.value;
|
||||
chartRef.value = option;
|
||||
});
|
||||
const option = chartRef.value
|
||||
chartRef.value = option
|
||||
})
|
||||
return { chartRef, option: optionRef, state3 }
|
||||
}
|
||||
|
||||
export function Chart5() {
|
||||
const chartRef = ref()
|
||||
const optionRef = ref<any>({});
|
||||
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})
|
||||
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
|
||||
SMM = data[state4.number].SMM || []
|
||||
LME = data[state4.number].LME || []
|
||||
SMM = SMM.map((item: any) => (item == 0 ? null : item))
|
||||
LME = LME.map((item: any) => (item == 0 ? null : item))
|
||||
}
|
||||
|
||||
|
||||
const option = {
|
||||
// width: '250px', // 设置图表宽度为 800 像素
|
||||
// height: '150px', // 设置图表高度为 400 像素
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ["SMM", "LME"],
|
||||
data: ['SMM', 'LME'],
|
||||
right: 20,
|
||||
top: 10,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -297,13 +334,13 @@ async function dataList() {
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: 'value'
|
||||
// name:'1',
|
||||
},
|
||||
{
|
||||
// name:'2',
|
||||
type: 'value',
|
||||
},
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
|
@ -311,7 +348,9 @@ async function dataList() {
|
|||
data: SMM,
|
||||
color: '#FF9307',
|
||||
type: 'line',
|
||||
smooth: true
|
||||
smooth: true,
|
||||
showDataShadow: true,
|
||||
connectNulls: true
|
||||
},
|
||||
{
|
||||
name: 'LME',
|
||||
|
|
@ -320,46 +359,62 @@ async function dataList() {
|
|||
color: '#0063ED',
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
showDataShadow: true,
|
||||
connectNulls: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
optionRef.value = option;
|
||||
optionRef.value = option
|
||||
}
|
||||
const ss = computed(() => [state4.number, state4.startTime, state4.endTime])
|
||||
watch(() => unref(ss),
|
||||
watch(
|
||||
() => unref(ss),
|
||||
async (v) => {
|
||||
|
||||
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
|
||||
const {type,list} = calculateDateIntervals(state4.startTime,state4.endTime)
|
||||
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 },
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
watchEffect(() => {
|
||||
const option = chartRef.value;
|
||||
chartRef.value = option;
|
||||
});
|
||||
const option = chartRef.value
|
||||
chartRef.value = option
|
||||
})
|
||||
return { chartRef, option: optionRef, state4 }
|
||||
}
|
||||
|
||||
export function Chart6() {
|
||||
const chartRef = ref()
|
||||
const optionRef = ref<any>({});
|
||||
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 { data } = await rateHistoryStat({
|
||||
currencyCodeFrom: state5.currencyCodeFrom,
|
||||
currencyCodeTo: state5.currencyCodeTo,
|
||||
type: state5.type,
|
||||
dateList: state5.dateList
|
||||
})
|
||||
const dat = (
|
||||
data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []
|
||||
).map((item: any) => (item == 0 ? null : item))
|
||||
const option = {
|
||||
// width: '250px', // 设置图表宽度为 800 像素
|
||||
// height: '150px', // 设置图表高度为 400 像素
|
||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
||||
grid: {
|
||||
left: '10',
|
||||
top: 90,
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
|
@ -381,28 +436,38 @@ async function getDat() {
|
|||
data: dat,
|
||||
color: '#89DF75',
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
smooth: true,
|
||||
showDataShadow: true,
|
||||
connectNulls: true
|
||||
}
|
||||
]
|
||||
}
|
||||
optionRef.value = option;
|
||||
optionRef.value = option
|
||||
}
|
||||
const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime])
|
||||
watch(() => unref(ss),
|
||||
const ss = computed(() => [
|
||||
state5.currencyCodeFrom,
|
||||
state5.currencyCodeTo,
|
||||
state5.startTime,
|
||||
state5.endTime
|
||||
])
|
||||
watch(
|
||||
() => unref(ss),
|
||||
async (v) => {
|
||||
const {type,list} = calculateDateIntervals(state5.startTime,state5.endTime)
|
||||
const { type, list } = calculateDateIntervals(
|
||||
state5.startTime,
|
||||
state5.endTime
|
||||
)
|
||||
|
||||
nameX = list
|
||||
state5.dateList = list
|
||||
state5.type = type
|
||||
getDat()
|
||||
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
watchEffect(() => {
|
||||
const option = chartRef.value;
|
||||
chartRef.value = option;
|
||||
});
|
||||
const option = chartRef.value
|
||||
chartRef.value = option
|
||||
})
|
||||
return { chartRef, option: optionRef, state5 }
|
||||
}
|
||||
Loading…
Reference in New Issue