update
parent
37675c31ad
commit
a10d0e32d1
|
|
@ -12,7 +12,7 @@ import { formatDate } from '@/utils/format'
|
||||||
import { Chart1 } from './indexData'
|
import { Chart1 } from './indexData'
|
||||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { NModal } from 'naive-ui'
|
import { NModal } from 'naive-ui'
|
||||||
const currentDate = new Date()
|
const currentDate = new Date()
|
||||||
const currentDates = new Date()
|
const currentDates = new Date()
|
||||||
const value1 = ref<[Date, Date]>([
|
const value1 = ref<[Date, Date]>([
|
||||||
|
|
@ -36,6 +36,26 @@ const pageInfo = reactive({
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 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 moduleCode = ref()
|
||||||
const imoduleCode = ref()
|
const imoduleCode = ref()
|
||||||
const visitDay = ref()
|
const visitDay = ref()
|
||||||
|
|
@ -112,7 +132,16 @@ const getDat = async () => {
|
||||||
xAxisData.push(item.moduleName)
|
xAxisData.push(item.moduleName)
|
||||||
siomesData.push(item.visitCount)
|
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>([])
|
const externalList = ref<any>([])
|
||||||
|
|
@ -123,17 +152,26 @@ const getExternalTimeStat = async () => {
|
||||||
let xAxisData: any[] = []
|
let xAxisData: any[] = []
|
||||||
let siomesData: any[] = []
|
let siomesData: any[] = []
|
||||||
data.forEach(
|
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] = item.moduleName
|
||||||
|
externalObj.value[item.moduleCode + 'color'] = colorList[9 + i]
|
||||||
xAxisData.push(item.moduleName)
|
xAxisData.push(item.moduleName)
|
||||||
siomesData.push(item.visitCount)
|
siomesData.push(item.visitCount)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
chartOption2.value = Chart1(xAxisData, siomesData)
|
chartOption2.value = Chart1(xAxisData)
|
||||||
console.log(
|
chartOption2.value.series[0] = {
|
||||||
'🚀 ~ file: index.vue:131 ~ Chart1(xAxisData, siomesData):',
|
data: siomesData,
|
||||||
Chart1(xAxisData, siomesData)
|
itemStyle: {
|
||||||
)
|
color: function (params: any) {
|
||||||
|
return colorList[9 + params.dataIndex] || '#8F97F8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
// chartOption2.value.height=3000
|
// chartOption2.value.height=3000
|
||||||
// chartOption2.value.width=1000
|
// chartOption2.value.width=1000
|
||||||
}
|
}
|
||||||
|
|
@ -270,15 +308,26 @@ const barOption = {
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','hour','month','year'],
|
data: [
|
||||||
|
'Mon',
|
||||||
|
'Tue',
|
||||||
|
'Wed',
|
||||||
|
'Thu',
|
||||||
|
'Fri',
|
||||||
|
'Sat',
|
||||||
|
'Sun',
|
||||||
|
'hour',
|
||||||
|
'month',
|
||||||
|
'year'
|
||||||
|
],
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: false, // 隐藏原始的 x 轴标签
|
show: false, // 隐藏原始的 x 轴标签
|
||||||
interval: 0,
|
interval: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'inside',
|
position: 'inside',
|
||||||
|
|
@ -307,11 +356,11 @@ const barOption = {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [120, 200, 150, 80, 70, 110, 130,123,50,80],
|
data: [120, 200, 150, 80, 70, 110, 130, 123, 50, 80],
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: function (params: any) {
|
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 }) => {
|
multipleSelection.value.forEach((i: { userId: any }) => {
|
||||||
userIdList.push(i.userId)
|
userIdList.push(i.userId)
|
||||||
})
|
})
|
||||||
console.log("🚀 ~ file: index.vue:328 ~ userIdList:", userIdList)
|
|
||||||
}
|
}
|
||||||
const CloseThiss = (data?: boolean) => {
|
const CloseThiss = (data?: boolean) => {
|
||||||
showModal.value = data || false
|
showModal.value = data || false
|
||||||
|
|
@ -449,9 +497,10 @@ const isDev = false
|
||||||
<div class="overflow-auto h-720px">
|
<div class="overflow-auto h-720px">
|
||||||
<div class="mt20px w-full">
|
<div class="mt20px w-full">
|
||||||
<span
|
<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-if="dataList"
|
||||||
v-for="i in dataList"
|
|
||||||
>
|
>
|
||||||
<span>{{ i.moduleName }}</span
|
<span>{{ i.moduleName }}</span
|
||||||
><br />
|
><br />
|
||||||
|
|
@ -477,41 +526,37 @@ const isDev = false
|
||||||
<VChart key="yyy" ref="chartRef1" :option="chartOption1" />
|
<VChart key="yyy" ref="chartRef1" :option="chartOption1" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-30px">
|
<div class="mt-30px">
|
||||||
<div class="flex items-center" v-if="isDev">
|
<div class="flex items-center" v-if="isDev">
|
||||||
<span class="text-#000 mr-10px">模块: </span>
|
<span class="text-#000 mr-10px">模块: </span>
|
||||||
<el-select
|
<el-select v-model="moduleCode" placeholder="选择模块" clearable>
|
||||||
v-model="moduleCode"
|
<el-option
|
||||||
placeholder="选择模块"
|
v-for="item in externalList"
|
||||||
clearable
|
:key="item.id"
|
||||||
>
|
:label="item.moduleName"
|
||||||
<el-option
|
:value="item.moduleCode"
|
||||||
v-for="item in externalList"
|
/>
|
||||||
:key="item.id"
|
</el-select>
|
||||||
:label="item.moduleName"
|
<el-button
|
||||||
:value="item.moduleCode"
|
type="primary"
|
||||||
/>
|
:icon="Search"
|
||||||
</el-select>
|
size="small"
|
||||||
<el-button
|
class="ml20px"
|
||||||
type="primary"
|
@click="handleClick({ paneName: activeName })"
|
||||||
:icon="Search"
|
>搜索</el-button
|
||||||
size="small"
|
>
|
||||||
class="ml20px"
|
<el-button
|
||||||
@click="handleClick({ paneName: activeName })"
|
type="primary"
|
||||||
>搜索</el-button
|
:icon="Search"
|
||||||
>
|
size="small"
|
||||||
<el-button
|
class="ml20px"
|
||||||
type="primary"
|
@click="showModal = true"
|
||||||
:icon="Search"
|
>部长以上人员足迹</el-button
|
||||||
size="small"
|
>
|
||||||
class="ml20px"
|
</div>
|
||||||
@click="showModal = true"
|
|
||||||
>部长以上人员足迹</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="pb-14px" v-if="isDev">
|
<div class="pb-14px" v-if="isDev">
|
||||||
<div class=" flex flex-wrap mb-30px" >
|
<div class="flex flex-wrap mb-30px">
|
||||||
<div
|
<div
|
||||||
class=" m-4 flex items-center justify-between w-45% h-full"
|
class="m-4 flex items-center justify-between w-45% h-full"
|
||||||
v-for="i in 10"
|
v-for="i in 10"
|
||||||
:key="i"
|
:key="i"
|
||||||
>
|
>
|
||||||
|
|
@ -522,7 +567,11 @@ const isDev = false
|
||||||
<p class="text-center mt-10">测试 {{ i }}</p>
|
<p class="text-center mt-10">测试 {{ i }}</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
|
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
|
||||||
|
|
@ -659,9 +708,10 @@ const isDev = false
|
||||||
<div>
|
<div>
|
||||||
<div class="mt20px w-full">
|
<div class="mt20px w-full">
|
||||||
<span
|
<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-if="externalList"
|
||||||
v-for="i in externalList"
|
v-for="(i, e) in externalList"
|
||||||
>
|
>
|
||||||
<span>{{ i.moduleName }}</span
|
<span>{{ i.moduleName }}</span
|
||||||
><br />
|
><br />
|
||||||
|
|
@ -678,21 +728,30 @@ const isDev = false
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<n-modal v-model:show="showModal">
|
<n-modal v-model:show="showModal">
|
||||||
<UserList
|
<UserList
|
||||||
:userDataList="setUserList"
|
:userDataList="setUserList"
|
||||||
@clickChild="handleChild"
|
@clickChild="handleChild"
|
||||||
@CloseThis="CloseThiss"
|
@CloseThis="CloseThiss"
|
||||||
/>
|
/>
|
||||||
</n-modal>
|
</n-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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 {
|
.cardfoot {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
background-image: url('@/assets/images/bg-card.svg');
|
// background-image: url('@/assets/images/bg-card.svg');
|
||||||
background-size: cover;
|
background-image: url('@/views/home/images/bei.png');
|
||||||
|
background-size: 60% 100%;
|
||||||
|
background-position: center right;
|
||||||
|
background-repeat: no-repeat;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25);
|
box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25);
|
||||||
}
|
}
|
||||||
|
|
@ -700,7 +759,9 @@ const isDev = false
|
||||||
.cardfoot:hover {
|
.cardfoot:hover {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
|
box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
|
||||||
color: #2042b4;
|
// color: #2042b4;
|
||||||
|
color: currentColor;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
|
|
|
||||||
|
|
@ -86,32 +86,39 @@ const states = reactive<any>({
|
||||||
// return { chartRef, option: optionRef, states }
|
// return { chartRef, option: optionRef, states }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
export function Chart1(xAxisData:any =[],siomesData:any=[],options={}) {
|
export function Chart1(xAxisData: any = [], color = []) {
|
||||||
const option = {
|
const option = {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
// height: '450px', // 设置图表高度为 400 像素
|
// height: '450px', // 设置图表高度为 400 像素
|
||||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
grid: {
|
||||||
tooltip: {
|
left: '10',
|
||||||
trigger: 'axis'
|
top: 90,
|
||||||
},
|
right: '10',
|
||||||
xAxis: {
|
bottom: '10',
|
||||||
type: 'category',
|
containLabel: true
|
||||||
data:xAxisData
|
},
|
||||||
},
|
tooltip: {
|
||||||
yAxis: [
|
trigger: 'axis'
|
||||||
{
|
},
|
||||||
type: 'value'
|
xAxis: {
|
||||||
}
|
type: 'category',
|
||||||
],
|
data: xAxisData
|
||||||
series: [
|
},
|
||||||
{
|
yAxis: [
|
||||||
data: siomesData,
|
{
|
||||||
color: '#8F97F8',
|
type: 'value'
|
||||||
type: 'bar',
|
}
|
||||||
|
],
|
||||||
}
|
series: [
|
||||||
]
|
{
|
||||||
}
|
data: [],
|
||||||
return {...option,...options}
|
color: function (params: any) {
|
||||||
|
return color[params.dataIndex] || '#8F97F8'
|
||||||
|
},
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return { ...option }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -52,9 +52,14 @@ onMounted(async ()=>{
|
||||||
const {data} =await getCurrencyList()
|
const {data} =await getCurrencyList()
|
||||||
const {data:dat} =await getMetalList()
|
const {data:dat} =await getMetalList()
|
||||||
if(dat&&dat!='null'&&dat.length>0){
|
if(dat&&dat!='null'&&dat.length>0){
|
||||||
metal.value = dat
|
metal.value = dat.filter((item:any) => {
|
||||||
from.value.label.radio = dat[0].value
|
if(["Fe","lengmei"].includes(item.value)){
|
||||||
state4.number = dat[0].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){
|
if(data&&data!='null'&&data.length>0){
|
||||||
currency.value = data
|
currency.value = data
|
||||||
|
|
|
||||||
|
|
@ -59,350 +59,415 @@ function reverseArray(inputArray: string | any[],star: number,enc: number) {
|
||||||
return reversedArray;
|
return reversedArray;
|
||||||
}
|
}
|
||||||
export function Chart1() {
|
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
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
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),
|
||||||
|
async (v) => {
|
||||||
|
console.log(state.type)
|
||||||
|
getDat()
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
watchEffect(() => {
|
||||||
|
const option = chartRef.value
|
||||||
|
chartRef.value = option
|
||||||
|
})
|
||||||
|
|
||||||
const chartRef = ref()
|
return { chartRef, option: optionRef, state }
|
||||||
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() {
|
export function Chart3() {
|
||||||
const chartRef = ref()
|
const chartRef = ref()
|
||||||
const optionRef = ref<any>({});
|
const optionRef = ref<any>({})
|
||||||
|
|
||||||
async function getDat() {
|
async function getDat() {
|
||||||
const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo})
|
const { data } = await historyStatSevenDay({
|
||||||
if(!data) return
|
currencyCodeFrom: state2.currencyCodeFrom,
|
||||||
const dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo]
|
currencyCodeTo: state2.currencyCodeTo
|
||||||
|
})
|
||||||
const option = {
|
if (!data) return
|
||||||
|
const dat = (
|
||||||
|
data[state2.currencyCodeFrom + '-' + state2.currencyCodeTo] || []
|
||||||
|
).map((item: any) => (item == 0 ? null : item))
|
||||||
|
|
||||||
height: '150px', // 设置图表高度为 400 像素
|
const option = {
|
||||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
height: '150px', // 设置图表高度为 400 像素
|
||||||
tooltip: {
|
grid: {
|
||||||
trigger: 'axis'
|
left: '10',
|
||||||
},
|
top: 90,
|
||||||
legend: {
|
right: '10',
|
||||||
data:state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
|
bottom: '10',
|
||||||
right: 20,
|
containLabel: true
|
||||||
top: 10,
|
},
|
||||||
},
|
tooltip: {
|
||||||
xAxis: {
|
trigger: 'axis'
|
||||||
type: 'category',
|
},
|
||||||
data: reverseArray(getDay(),8,10)
|
legend: {
|
||||||
},
|
data: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
|
||||||
yAxis: {
|
right: 20,
|
||||||
type: 'value'
|
top: 10
|
||||||
},
|
},
|
||||||
series: [
|
xAxis: {
|
||||||
{
|
type: 'category',
|
||||||
name: state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
|
data: reverseArray(getDay(), 8, 10)
|
||||||
data: dat,
|
},
|
||||||
color: '#8F97F8',
|
yAxis: {
|
||||||
type: 'line',
|
type: 'value'
|
||||||
label: {
|
},
|
||||||
show: true,
|
series: [
|
||||||
position: 'top'
|
{
|
||||||
},
|
name: state2.currencyCodeFrom + '-' + state2.currencyCodeTo,
|
||||||
},
|
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])
|
||||||
const ss = computed(() => [state2.currencyCodeFrom,state2.currencyCodeTo])
|
watch(
|
||||||
watch(() => unref(ss),
|
() => unref(ss),
|
||||||
async (v) => {
|
async (v) => {
|
||||||
console.log(state2.type)
|
console.log(state2.type)
|
||||||
getDat()
|
getDat()
|
||||||
|
},
|
||||||
},
|
{ immediate: true, deep: true }
|
||||||
{ immediate: true, deep: true },
|
)
|
||||||
)
|
watchEffect(() => {
|
||||||
watchEffect(() => {
|
const option = chartRef.value
|
||||||
const option = chartRef.value;
|
chartRef.value = option
|
||||||
chartRef.value = option;
|
})
|
||||||
});
|
return { chartRef, option: optionRef, state2 }
|
||||||
return { chartRef, option: optionRef, state2 }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function Chart4() {
|
export function Chart4() {
|
||||||
|
const chartRef = ref()
|
||||||
|
const optionRef = ref<any>({})
|
||||||
|
|
||||||
const chartRef = ref()
|
async function getDat() {
|
||||||
const optionRef = ref<any>({});
|
const { data } = await historyStatSevenDay({
|
||||||
|
currencyCodeFrom: state3.currencyCodeFrom,
|
||||||
|
currencyCodeTo: state3.currencyCodeTo
|
||||||
|
})
|
||||||
|
if (!data) return
|
||||||
|
const dat = (
|
||||||
|
data[state3.currencyCodeFrom + '-' + state3.currencyCodeTo] || []
|
||||||
|
).map((item: any) => (item == 0 ? null : item))
|
||||||
|
|
||||||
async function getDat() {
|
const option = {
|
||||||
const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo})
|
grid: {
|
||||||
if(!data) return
|
left: '10',
|
||||||
const dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo]
|
top: 90,
|
||||||
|
right: '10',
|
||||||
const option = {
|
bottom: '10',
|
||||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
containLabel: true
|
||||||
|
},
|
||||||
|
|
||||||
height: '150px', // 设置图表高度为 400 像素
|
height: '150px', // 设置图表高度为 400 像素
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data:state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
|
data: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
|
||||||
right: 20,
|
right: 20,
|
||||||
top: 10,
|
top: 10
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: reverseArray(getDay(),8,10)
|
data: reverseArray(getDay(), 8, 10)
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
|
name: state3.currencyCodeFrom + '-' + state3.currencyCodeTo,
|
||||||
data: dat,
|
data: dat,
|
||||||
color: '#8F97F8',
|
color: '#8F97F8',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
label: {
|
showDataShadow: true,
|
||||||
show: true,
|
connectNulls: true,
|
||||||
position: 'top'
|
label: {
|
||||||
},
|
show: true,
|
||||||
|
position: 'top'
|
||||||
},
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
}
|
||||||
|
|
||||||
}
|
optionRef.value = option
|
||||||
|
}
|
||||||
|
const ss = computed(() => [state3.currencyCodeFrom, state3.currencyCodeTo])
|
||||||
|
watch(
|
||||||
|
() => unref(ss),
|
||||||
|
async (v) => {
|
||||||
|
console.log(state3.type)
|
||||||
|
|
||||||
optionRef.value = option;
|
getDat()
|
||||||
}
|
},
|
||||||
const ss = computed(() => [state3.currencyCodeFrom,state3.currencyCodeTo])
|
{ immediate: true, deep: true }
|
||||||
watch(() => unref(ss),
|
)
|
||||||
async (v) => {
|
watchEffect(() => {
|
||||||
console.log(state3.type)
|
const option = chartRef.value
|
||||||
|
chartRef.value = option
|
||||||
getDat()
|
})
|
||||||
|
return { chartRef, option: optionRef, state3 }
|
||||||
},
|
|
||||||
{ immediate: true, deep: true },
|
|
||||||
)
|
|
||||||
watchEffect(() => {
|
|
||||||
const option = chartRef.value;
|
|
||||||
chartRef.value = option;
|
|
||||||
});
|
|
||||||
return { chartRef, option: optionRef, state3 }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Chart5() {
|
export function Chart5() {
|
||||||
const chartRef = ref()
|
const chartRef = ref()
|
||||||
const optionRef = ref<any>({});
|
const optionRef = ref<any>({})
|
||||||
let nameX: string[]
|
let nameX: string[]
|
||||||
async function dataList() {
|
async function dataList() {
|
||||||
let SMM,LME
|
let SMM, LME
|
||||||
const {data} = await historyStat({number:state4.number,type:state4.type,dateList:state4.dateList})
|
const { data } = await historyStat({
|
||||||
if(data&&data[state4.number]){
|
number: state4.number,
|
||||||
SMM=data[state4.number].SMM
|
type: state4.type,
|
||||||
LME = data[state4.number].LME
|
dateList: state4.dateList
|
||||||
}
|
})
|
||||||
|
if (data && data[state4.number]) {
|
||||||
|
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 = {
|
const option = {
|
||||||
// width: '250px', // 设置图表宽度为 800 像素
|
// width: '250px', // 设置图表宽度为 800 像素
|
||||||
// height: '150px', // 设置图表高度为 400 像素
|
// height: '150px', // 设置图表高度为 400 像素
|
||||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
grid: {
|
||||||
tooltip: {
|
left: '10',
|
||||||
trigger: 'axis'
|
top: 90,
|
||||||
},
|
right: '10',
|
||||||
legend: {
|
bottom: '10',
|
||||||
data: ["SMM", "LME"],
|
containLabel: true
|
||||||
right: 20,
|
},
|
||||||
top: 10,
|
tooltip: {
|
||||||
},
|
trigger: 'axis'
|
||||||
xAxis: {
|
},
|
||||||
type: 'category',
|
legend: {
|
||||||
data:nameX
|
data: ['SMM', 'LME'],
|
||||||
},
|
right: 20,
|
||||||
yAxis: [
|
top: 10
|
||||||
{
|
},
|
||||||
type: 'value',
|
xAxis: {
|
||||||
// name:'1',
|
type: 'category',
|
||||||
},
|
data: nameX
|
||||||
{
|
},
|
||||||
// name:'2',
|
yAxis: [
|
||||||
type: 'value',
|
{
|
||||||
},
|
type: 'value'
|
||||||
],
|
// name:'1',
|
||||||
series: [
|
},
|
||||||
{
|
{
|
||||||
name: 'SMM',
|
// name:'2',
|
||||||
data: SMM,
|
type: 'value'
|
||||||
color: '#FF9307',
|
}
|
||||||
type: 'line',
|
],
|
||||||
smooth: true
|
series: [
|
||||||
},
|
{
|
||||||
{
|
name: 'SMM',
|
||||||
name: 'LME',
|
data: SMM,
|
||||||
data: LME,
|
color: '#FF9307',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
color: '#0063ED',
|
smooth: true,
|
||||||
smooth: true,
|
showDataShadow: true,
|
||||||
yAxisIndex: 1,
|
connectNulls: true
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
|
name: 'LME',
|
||||||
|
data: LME,
|
||||||
}
|
type: 'line',
|
||||||
optionRef.value = option;
|
color: '#0063ED',
|
||||||
}
|
smooth: true,
|
||||||
const ss = computed(() => [state4.number,state4.startTime,state4.endTime])
|
yAxisIndex: 1,
|
||||||
watch(() => unref(ss),
|
showDataShadow: true,
|
||||||
async (v) => {
|
connectNulls: true
|
||||||
|
}
|
||||||
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
|
]
|
||||||
const {type,list} = calculateDateIntervals(state4.startTime,state4.endTime)
|
}
|
||||||
nameX =list
|
optionRef.value = option
|
||||||
state4.dateList = list
|
}
|
||||||
state4.type = type
|
const ss = computed(() => [state4.number, state4.startTime, state4.endTime])
|
||||||
console.log(state4.number)
|
watch(
|
||||||
dataList()
|
() => unref(ss),
|
||||||
},
|
async (v) => {
|
||||||
{ immediate: true, deep: true },
|
// console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
|
||||||
)
|
const { type, list } = calculateDateIntervals(
|
||||||
watchEffect(() => {
|
state4.startTime,
|
||||||
const option = chartRef.value;
|
state4.endTime
|
||||||
chartRef.value = option;
|
)
|
||||||
});
|
nameX = list
|
||||||
return { chartRef, option: optionRef, state4 }
|
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() {
|
export function Chart6() {
|
||||||
const chartRef = ref()
|
const chartRef = ref()
|
||||||
const optionRef = ref<any>({});
|
const optionRef = ref<any>({})
|
||||||
|
|
||||||
let nameX: string[]
|
let nameX: string[]
|
||||||
async function getDat() {
|
async function getDat() {
|
||||||
const {data} = await rateHistoryStat({currencyCodeFrom:state5.currencyCodeFrom,currencyCodeTo:state5.currencyCodeTo,type:state5.type,dateList:state5.dateList})
|
const { data } = await rateHistoryStat({
|
||||||
const dat = data[state5.currencyCodeFrom+'-'+state5.currencyCodeTo]
|
currencyCodeFrom: state5.currencyCodeFrom,
|
||||||
const option = {
|
currencyCodeTo: state5.currencyCodeTo,
|
||||||
// width: '250px', // 设置图表宽度为 800 像素
|
type: state5.type,
|
||||||
// height: '150px', // 设置图表高度为 400 像素
|
dateList: state5.dateList
|
||||||
grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
|
})
|
||||||
tooltip: {
|
const dat = (
|
||||||
trigger: 'axis'
|
data[state5.currencyCodeFrom + '-' + state5.currencyCodeTo] || []
|
||||||
},
|
).map((item: any) => (item == 0 ? null : item))
|
||||||
// legend: {
|
const option = {
|
||||||
// data:state5.currencyCodeFrom-state5.currencyCodeTo,
|
// width: '250px', // 设置图表宽度为 800 像素
|
||||||
// right: 20,
|
// height: '150px', // 设置图表高度为 400 像素
|
||||||
// top: 10,
|
grid: {
|
||||||
// },
|
left: '10',
|
||||||
xAxis: {
|
top: 90,
|
||||||
type: 'category',
|
right: '10',
|
||||||
data:nameX
|
bottom: '10',
|
||||||
},
|
containLabel: true
|
||||||
yAxis: {
|
},
|
||||||
type: 'value'
|
tooltip: {
|
||||||
},
|
trigger: 'axis'
|
||||||
series: [
|
},
|
||||||
{
|
// legend: {
|
||||||
name: state5.currencyCodeFrom+'-'+state5.currencyCodeTo,
|
// data:state5.currencyCodeFrom-state5.currencyCodeTo,
|
||||||
data: dat,
|
// right: 20,
|
||||||
color: '#89DF75',
|
// top: 10,
|
||||||
type: 'line',
|
// },
|
||||||
smooth: true
|
xAxis: {
|
||||||
},
|
type: 'category',
|
||||||
]
|
data: nameX
|
||||||
}
|
},
|
||||||
optionRef.value = option;
|
yAxis: {
|
||||||
}
|
type: 'value'
|
||||||
const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime])
|
},
|
||||||
watch(() => unref(ss),
|
series: [
|
||||||
async (v) => {
|
{
|
||||||
const {type,list} = calculateDateIntervals(state5.startTime,state5.endTime)
|
name: state5.currencyCodeFrom + '-' + state5.currencyCodeTo,
|
||||||
|
data: dat,
|
||||||
|
color: '#89DF75',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showDataShadow: true,
|
||||||
|
connectNulls: 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
|
nameX = list
|
||||||
state5.dateList = list
|
state5.dateList = list
|
||||||
state5.type = type
|
state5.type = type
|
||||||
getDat()
|
getDat()
|
||||||
|
},
|
||||||
},
|
{ immediate: true, deep: true }
|
||||||
{ immediate: true, deep: true },
|
)
|
||||||
)
|
watchEffect(() => {
|
||||||
watchEffect(() => {
|
const option = chartRef.value
|
||||||
const option = chartRef.value;
|
chartRef.value = option
|
||||||
chartRef.value = option;
|
})
|
||||||
});
|
return { chartRef, option: optionRef, state5 }
|
||||||
return { chartRef, option: optionRef, state5 }
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue