import {defineComponent, getCurrentInstance, onBeforeUnmount, onMounted, PropType, ref,shallowRef, watch} from 'vue'
import type { Ref } from 'vue'
import * as echarts from "echarts";
import {useI18n} from "vue-i18n";
import {EChartsType} from "echarts/types/dist/echarts";
import {HostBillHistory} from "@/service/budget";
const props = {
height: {
type: [String, Number] as PropType<string | number>,
default: 590
},
width: {
type: [String, Number] as PropType<string | number>,
default: '100%'
},
data: {
type: Array as PropType<Array<HostBillHistory>>
}
}
const HistoryBill = defineComponent({
name: 'HistoryBill',
props,
setup(props) {
const updateChartData = () => {
let dateArr = props.data.map(obj=>obj.day)
let hostArr = props.data.map(obj=>)
let moneyArr = props.data.map(obj=> parseFloat((/10000).toFixed(2)))
[0].data=dateArr
[0].data=hostArr
[1].data=moneyArr
}
const option = {
backgroundColor: 'white',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['主机数量', '账单金额']
},
xAxis: [
{
type: 'category',
data: props.data.map(obj=>obj.day),
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '主机数量',
min: 0,
max: 250,
interval: 10,
axisLabel: {
formatter: '{value} 台'
}
},
{
type: 'value',
name: '账单金额',
min: 0,
max: 50,
interval: 2,
axisLabel: {
formatter: '{value} 万'
}
}
],
series: [
{
name: '主机数量',
type: 'line',
tooltip: {
valueFormatter: value => value + ' 台'
},
data: props.data.map(obj=>)
},
{
name: '账单金额',
type: 'bar',
tooltip: {
valueFormatter: value => value + ' 万'
},
yAxisIndex: 1,
data: props.data.map(obj=> parseFloat((/10000).toFixed(2)))
}
]
}
const globalProperties = getCurrentInstance()?.
const billChartRef: Ref<HTMLDivElement | null> = ref(null)
let chart = null // 此处不要使用vue3的响应式方法创建
const init = () => {
chart = globalProperties?.(billChartRef.value)
(option)
}
const resize = (() => {
chart && ()
}, 20)
watch(
() => props.data,
() => {
// [0].data= top10()
updateChartData()
(option)
}
)
onMounted(() => {
init()
addEventListener('resize', resize)
})
return { billChartRef }
},
render() {
const { height, width } = this
return (
<div
ref='billChartRef'
id={'myChart'}
style={{
height: "100%",
width: typeof width === 'number' ? width + 'px' : width
}}
>
</div>
)
}
})
export default HistoryBill