songjianet
3 years ago
committed by
GitHub
20 changed files with 359 additions and 126 deletions
@ -0,0 +1,66 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { getCurrentInstance, onMounted, onBeforeUnmount, watch } from 'vue' |
||||||
|
import { useThemeStore } from '@/store/theme/theme' |
||||||
|
import { throttle } from 'echarts' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
import type { ECharts } from 'echarts' |
||||||
|
import type { ECBasicOption } from 'echarts/types/dist/shared' |
||||||
|
|
||||||
|
function initChart<Opt extends ECBasicOption>( |
||||||
|
domRef: Ref<HTMLDivElement | null>, |
||||||
|
option: Opt |
||||||
|
): ECharts | null { |
||||||
|
let chart: ECharts | null = null |
||||||
|
const themeStore = useThemeStore() |
||||||
|
const globalProperties = |
||||||
|
getCurrentInstance()?.appContext.config.globalProperties |
||||||
|
|
||||||
|
const init = () => { |
||||||
|
chart = globalProperties?.echarts.init( |
||||||
|
domRef.value, |
||||||
|
themeStore.darkTheme ? 'dark-bold' : 'macarons' |
||||||
|
) |
||||||
|
chart && chart.setOption(option) |
||||||
|
} |
||||||
|
|
||||||
|
const resize = throttle(() => { |
||||||
|
chart && chart.resize() |
||||||
|
}, 20) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => themeStore.darkTheme, |
||||||
|
() => { |
||||||
|
chart?.dispose() |
||||||
|
init() |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
init() |
||||||
|
addEventListener('resize', resize) |
||||||
|
}) |
||||||
|
|
||||||
|
onBeforeUnmount(() => { |
||||||
|
removeEventListener('resize', resize) |
||||||
|
}) |
||||||
|
|
||||||
|
return chart |
||||||
|
} |
||||||
|
|
||||||
|
export default initChart |
@ -0,0 +1,106 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, PropType, ref } from 'vue' |
||||||
|
import initChart from '@/components/chart' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
|
||||||
|
const props = { |
||||||
|
height: { |
||||||
|
type: [String, Number] as PropType<string | number>, |
||||||
|
default: 400, |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: [String, Number] as PropType<string | number>, |
||||||
|
default: 400, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
const GaugeChart = defineComponent({ |
||||||
|
name: 'GaugeChart', |
||||||
|
props, |
||||||
|
setup() { |
||||||
|
const gaugeChartRef: Ref<HTMLDivElement | null> = ref(null) |
||||||
|
|
||||||
|
const option = { |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'gauge', |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
width: 30, |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
itemStyle: { |
||||||
|
color: 'auto', |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
distance: -30, |
||||||
|
length: 8, |
||||||
|
lineStyle: { |
||||||
|
color: '#fff', |
||||||
|
width: 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
distance: -30, |
||||||
|
length: 30, |
||||||
|
lineStyle: { |
||||||
|
color: '#fff', |
||||||
|
width: 4, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: 'auto', |
||||||
|
distance: 40, |
||||||
|
fontSize: 20, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
formatter: '{value} km/h', |
||||||
|
color: 'auto', |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 70, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
initChart(gaugeChartRef, option) |
||||||
|
|
||||||
|
return { gaugeChartRef } |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { height, width } = this |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref='gaugeChartRef' |
||||||
|
style={{ |
||||||
|
height: typeof height === 'number' ? height + 'px' : height, |
||||||
|
width: typeof width === 'number' ? width + 'px' : width, |
||||||
|
}} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export default GaugeChart |
@ -0,0 +1,97 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, PropType, ref } from 'vue' |
||||||
|
import initChart from '@/components/chart' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
|
||||||
|
const props = { |
||||||
|
height: { |
||||||
|
type: [String, Number] as PropType<string | number>, |
||||||
|
default: 400, |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: [String, Number] as PropType<string | number>, |
||||||
|
default: 400, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
const PieChart = defineComponent({ |
||||||
|
name: 'PieChart', |
||||||
|
props, |
||||||
|
setup() { |
||||||
|
const pieChartRef: Ref<HTMLDivElement | null> = ref(null) |
||||||
|
|
||||||
|
const option = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
backgroundColor: '#fff', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
top: '5%', |
||||||
|
left: 'center', |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: 'Access From', |
||||||
|
type: 'pie', |
||||||
|
radius: ['40%', '70%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'center', |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
fontSize: '40', |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ value: 1048, name: 'Search Engine' }, |
||||||
|
{ value: 735, name: 'Direct' }, |
||||||
|
{ value: 580, name: 'Email' }, |
||||||
|
{ value: 484, name: 'Union Ads' }, |
||||||
|
{ value: 300, name: 'Video Ads' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
initChart(pieChartRef, option) |
||||||
|
|
||||||
|
return { pieChartRef } |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { height, width } = this |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref='pieChartRef' |
||||||
|
style={{ |
||||||
|
height: typeof height === 'number' ? height + 'px' : height, |
||||||
|
width: typeof width === 'number' ? width + 'px' : width, |
||||||
|
}} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export default PieChart |
@ -1,24 +0,0 @@ |
|||||||
/* |
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
|
||||||
* contributor license agreements. See the NOTICE file distributed with |
|
||||||
* this work for additional information regarding copyright ownership. |
|
||||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
|
||||||
* (the "License"); you may not use this file except in compliance with |
|
||||||
* the License. You may obtain a copy of the License at |
|
||||||
* |
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
* |
|
||||||
* Unless required by applicable law or agreed to in writing, software |
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS, |
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||||
* See the License for the specific language governing permissions and |
|
||||||
* limitations under the License. |
|
||||||
*/ |
|
||||||
|
|
||||||
import { defineComponent } from 'vue' |
|
||||||
|
|
||||||
const DSTable = defineComponent({ |
|
||||||
name: 'DSTable', |
|
||||||
}) |
|
||||||
|
|
||||||
export default DSTable |
|
@ -1,34 +0,0 @@ |
|||||||
/* |
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
|
||||||
* contributor license agreements. See the NOTICE file distributed with |
|
||||||
* this work for additional information regarding copyright ownership. |
|
||||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
|
||||||
* (the "License"); you may not use this file except in compliance with |
|
||||||
* the License. You may obtain a copy of the License at |
|
||||||
* |
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
* |
|
||||||
* Unless required by applicable law or agreed to in writing, software |
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS, |
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
||||||
* See the License for the specific language governing permissions and |
|
||||||
* limitations under the License. |
|
||||||
*/ |
|
||||||
|
|
||||||
import { defineComponent } from 'vue' |
|
||||||
import { NLayout, NLayoutContent } from 'naive-ui' |
|
||||||
|
|
||||||
const Content = defineComponent({ |
|
||||||
name: 'Content', |
|
||||||
render() { |
|
||||||
return ( |
|
||||||
<NLayout> |
|
||||||
<NLayoutContent> |
|
||||||
<router-view /> |
|
||||||
</NLayoutContent> |
|
||||||
</NLayout> |
|
||||||
) |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
export default Content |
|
Loading…
Reference in new issue