89 lines
2.1 KiB
Plaintext
89 lines
2.1 KiB
Plaintext
import {timeStat } from '@/api/daikin/base'
|
|
import type { EChartsOption } from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
import {formatDate} from '@/utils/format'
|
|
|
|
const currentDate = new Date();
|
|
const currentDates = new Date();
|
|
const value1 = ref<[Date, Date]>([
|
|
currentDate.setMonth(currentDate.getMonth() ),
|
|
new Date()
|
|
])
|
|
const value2 = ref<[Date, Date]>([
|
|
currentDates.setMonth(currentDates.getMonth() ),
|
|
new Date()
|
|
])
|
|
|
|
const states = reactive<any>({
|
|
startTime:formatDate(value1.value[0]).substring(0,10),
|
|
endTime: formatDate(value1.value[1]).substring(0,10),
|
|
// timeType:2,
|
|
})
|
|
|
|
|
|
export function Chart1() {
|
|
|
|
const chartRef = ref()
|
|
const optionRef = ref()
|
|
async function getDat() {
|
|
const {data} = await timeStat(states)
|
|
let xAxisData:any[]=[]
|
|
let siomesData:any[]=[]
|
|
data.map((item: { moduleName: any; visitCount: any; })=>{
|
|
xAxisData.push(item.moduleName)
|
|
siomesData.push(item.visitCount)
|
|
})
|
|
console.log(xAxisData,siomesData)
|
|
if(!data) return
|
|
// let {LME,SMM} = data[state.type]
|
|
|
|
const option = {
|
|
|
|
// height: '450px', // 设置图表高度为 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:xAxisData
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
data: siomesData,
|
|
color: '#8F97F8',
|
|
type: 'bar',
|
|
|
|
}
|
|
]
|
|
}
|
|
optionRef.value = option
|
|
}
|
|
const ss = computed(() => [states.timeType,states.startTime,states.endTime])
|
|
watch(() => unref(ss),
|
|
async (v) => {
|
|
console.log(states.timeType)
|
|
getDat()
|
|
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
watchEffect(() => {
|
|
const option = chartRef.value;
|
|
chartRef.value = option;
|
|
});
|
|
|
|
return { chartRef, option: optionRef, states }
|
|
}
|
|
|