From 7cf58a4d2fff6b9cba9029d4d43ba9744dbef864 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 18 七月 2024 15:49:03 +0800
Subject: [PATCH] 工单更新
---
src/views/demo/charts/SaleRadar.vue | 172 +++++++++++++++++++++++++++-----------------------------
1 files changed, 83 insertions(+), 89 deletions(-)
diff --git a/src/views/demo/charts/SaleRadar.vue b/src/views/demo/charts/SaleRadar.vue
index 8ea3d5a..bdc7cd7 100644
--- a/src/views/demo/charts/SaleRadar.vue
+++ b/src/views/demo/charts/SaleRadar.vue
@@ -3,99 +3,93 @@
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import type { Ref } from 'vue';
-
- import { defineComponent, ref, watch } from 'vue';
+ import { ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
- import { useECharts } from '/@/hooks/web/useECharts';
+ import { useECharts } from '@/hooks/web/useECharts';
- export default defineComponent({
- components: { Card },
- props: {
- loading: Boolean,
- width: {
- type: String as PropType<string>,
- default: '100%',
- },
- height: {
- type: String as PropType<string>,
- default: '400px',
- },
+ const props = defineProps({
+ loading: Boolean,
+ width: {
+ type: String as PropType<string>,
+ default: '100%',
},
- setup(props) {
- const chartRef = ref<HTMLDivElement | null>(null);
- const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
- watch(
- () => props.loading,
- () => {
- if (props.loading) {
- return;
- }
- setOptions({
- legend: {
- bottom: 0,
- data: ['Visits', 'Sales'],
- },
- tooltip: {},
- radar: {
- radius: '60%',
- splitNumber: 8,
- indicator: [
- {
- name: '2017',
- },
- {
- name: '2017',
- },
- {
- name: '2018',
- },
- {
- name: '2019',
- },
- {
- name: '2020',
- },
- {
- name: '2021',
- },
- ],
- },
- series: [
- {
- type: 'radar',
- symbolSize: 0,
- areaStyle: {
- shadowBlur: 0,
- shadowColor: 'rgba(0,0,0,.2)',
- shadowOffsetX: 0,
- shadowOffsetY: 10,
- opacity: 1,
- },
- data: [
- {
- value: [90, 50, 86, 40, 50, 20],
- name: 'Visits',
- itemStyle: {
- color: '#9f8ed7',
- },
- },
- {
- value: [70, 75, 70, 76, 20, 85],
- name: 'Sales',
- itemStyle: {
- color: '#1edec5',
- },
- },
- ],
- },
- ],
- });
- },
- { immediate: true },
- );
- return { chartRef };
+ height: {
+ type: String as PropType<string>,
+ default: '400px',
},
});
+
+ const chartRef = ref<HTMLDivElement | null>(null);
+ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+ watch(
+ () => props.loading,
+ () => {
+ if (props.loading) {
+ return;
+ }
+ setOptions({
+ legend: {
+ bottom: 0,
+ data: ['Visits', 'Sales'],
+ },
+ tooltip: {},
+ radar: {
+ radius: '60%',
+ splitNumber: 8,
+ indicator: [
+ {
+ name: '2017',
+ },
+ {
+ name: '2017',
+ },
+ {
+ name: '2018',
+ },
+ {
+ name: '2019',
+ },
+ {
+ name: '2020',
+ },
+ {
+ name: '2021',
+ },
+ ],
+ },
+ series: [
+ {
+ type: 'radar',
+ symbolSize: 0,
+ areaStyle: {
+ shadowBlur: 0,
+ shadowColor: 'rgba(0,0,0,.2)',
+ shadowOffsetX: 0,
+ shadowOffsetY: 10,
+ opacity: 1,
+ },
+ data: [
+ {
+ value: [90, 50, 86, 40, 50, 20],
+ name: 'Visits',
+ itemStyle: {
+ color: '#9f8ed7',
+ },
+ },
+ {
+ value: [70, 75, 70, 76, 20, 85],
+ name: 'Sales',
+ itemStyle: {
+ color: '#1edec5',
+ },
+ },
+ ],
+ },
+ ],
+ });
+ },
+ { immediate: true },
+ );
</script>
--
Gitblit v1.9.3