From 7bcfc0507043dc878c801a259aa7d058f4982551 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 09 一月 2025 00:42:21 +0800
Subject: [PATCH] 工单管理优化
---
src/views/demo/charts/Pie.vue | 267 ++++++++++++++++++++++++++---------------------------
1 files changed, 131 insertions(+), 136 deletions(-)
diff --git a/src/views/demo/charts/Pie.vue b/src/views/demo/charts/Pie.vue
index faf2435..b4e6d75 100644
--- a/src/views/demo/charts/Pie.vue
+++ b/src/views/demo/charts/Pie.vue
@@ -1,146 +1,141 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
-<script lang="ts">
- import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
+<script lang="ts" setup>
+ import { PropType, ref, Ref, onMounted } from 'vue';
+ import { useECharts } from '@/hooks/web/useECharts';
- import { useECharts } from '/@/hooks/web/useECharts';
-
- export default defineComponent({
- props: {
- width: {
- type: String as PropType<string>,
- default: '100%',
- },
- height: {
- type: String as PropType<string>,
- default: 'calc(100vh - 78px)',
- },
+ defineProps({
+ width: {
+ type: String as PropType<string>,
+ default: '100%',
},
- setup() {
- const chartRef = ref<HTMLDivElement | null>(null);
- const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
- const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
- const yAxisData = [
- '鍘熷洜1',
- '鍘熷洜2',
- '鍘熷洜3',
- '鍘熷洜4',
- '鍘熷洜5',
- '鍘熷洜6',
- '鍘熷洜7',
- '鍘熷洜8',
- '鍘熷洜9',
- '鍘熷洜10',
- ];
- onMounted(() => {
- setOptions({
- backgroundColor: '#0f375f',
- title: [
- {
- text: '鍚勬笭閬撴姇璇夊崰姣�',
- left: '2%',
- top: '1%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- {
- text: '鎶曡瘔鍘熷洜TOP10',
- left: '40%',
- top: '1%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- {
- text: '鍚勭骇鍒姇璇夊崰姣�',
- left: '2%',
- top: '50%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- ],
- grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
- tooltip: {
- formatter: '{b} ({c})',
+ height: {
+ type: String as PropType<string>,
+ default: 'calc(100vh - 78px)',
+ },
+ });
+
+ const chartRef = ref<HTMLDivElement | null>(null);
+ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+ const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
+ const yAxisData = [
+ '鍘熷洜1',
+ '鍘熷洜2',
+ '鍘熷洜3',
+ '鍘熷洜4',
+ '鍘熷洜5',
+ '鍘熷洜6',
+ '鍘熷洜7',
+ '鍘熷洜8',
+ '鍘熷洜9',
+ '鍘熷洜10',
+ ];
+ onMounted(() => {
+ setOptions({
+ backgroundColor: '#0f375f',
+ title: [
+ {
+ text: '鍚勬笭閬撴姇璇夊崰姣�',
+ left: '2%',
+ top: '1%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
},
- xAxis: [
- {
- gridIndex: 0,
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- axisLine: { show: false },
- },
+ },
+ {
+ text: '鎶曡瘔鍘熷洜TOP10',
+ left: '40%',
+ top: '1%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ },
+ },
+ {
+ text: '鍚勭骇鍒姇璇夊崰姣�',
+ left: '2%',
+ top: '50%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ },
+ },
+ ],
+ grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
+ tooltip: {
+ formatter: '{b} ({c})',
+ },
+ xAxis: [
+ {
+ gridIndex: 0,
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ axisLine: { show: false },
+ },
+ ],
+ yAxis: [
+ {
+ gridIndex: 0,
+ interval: 0,
+ data: yAxisData.reverse(),
+ axisTick: { show: false },
+ axisLabel: { show: true },
+ splitLine: { show: false },
+ axisLine: { show: true, lineStyle: { color: '#6173a3' } },
+ },
+ ],
+ series: [
+ {
+ name: '鍚勬笭閬撴姇璇夊崰姣�',
+ type: 'pie',
+ radius: '30%',
+ center: ['22%', '25%'],
+ data: [
+ { value: 335, name: '瀹㈡湇鐢佃瘽' },
+ { value: 310, name: '濂ヨ开瀹樼綉' },
+ { value: 234, name: '濯掍綋鏇濆厜' },
+ { value: 135, name: '璐ㄦ鎬诲眬' },
+ { value: 105, name: '鍏朵粬' },
],
- yAxis: [
- {
- gridIndex: 0,
- interval: 0,
- data: yAxisData.reverse(),
- axisTick: { show: false },
- axisLabel: { show: true },
- splitLine: { show: false },
- axisLine: { show: true, lineStyle: { color: '#6173a3' } },
- },
+ labelLine: { show: false },
+ label: {
+ show: true,
+ formatter: '{b} \n ({d}%)',
+ color: '#B1B9D3',
+ },
+ },
+ {
+ name: '鍚勭骇鍒姇璇夊崰姣�',
+ type: 'pie',
+ radius: '30%',
+ center: ['22%', '75%'],
+ labelLine: { show: false },
+ data: [
+ { value: 335, name: 'A绾�' },
+ { value: 310, name: 'B绾�' },
+ { value: 234, name: 'C绾�' },
+ { value: 135, name: 'D绾�' },
],
- series: [
- {
- name: '鍚勬笭閬撴姇璇夊崰姣�',
- type: 'pie',
- radius: '30%',
- center: ['22%', '25%'],
- data: [
- { value: 335, name: '瀹㈡湇鐢佃瘽' },
- { value: 310, name: '濂ヨ开瀹樼綉' },
- { value: 234, name: '濯掍綋鏇濆厜' },
- { value: 135, name: '璐ㄦ鎬诲眬' },
- { value: 105, name: '鍏朵粬' },
- ],
- labelLine: { show: false },
- label: {
- show: true,
- formatter: '{b} \n ({d}%)',
- color: '#B1B9D3',
- },
- },
- {
- name: '鍚勭骇鍒姇璇夊崰姣�',
- type: 'pie',
- radius: '30%',
- center: ['22%', '75%'],
- labelLine: { show: false },
- data: [
- { value: 335, name: 'A绾�' },
- { value: 310, name: 'B绾�' },
- { value: 234, name: 'C绾�' },
- { value: 135, name: 'D绾�' },
- ],
- label: {
- show: true,
- formatter: '{b} \n ({d}%)',
- color: '#B1B9D3',
- },
- },
- {
- name: '鎶曡瘔鍘熷洜TOP10',
- type: 'bar',
- xAxisIndex: 0,
- yAxisIndex: 0,
- barWidth: '45%',
- itemStyle: { color: '#86c9f4' },
- label: { show: true, position: 'right', color: '#9EA7C4' },
- data: dataAll.sort(),
- },
- ],
- });
- });
- return { chartRef };
- },
+ label: {
+ show: true,
+ formatter: '{b} \n ({d}%)',
+ color: '#B1B9D3',
+ },
+ },
+ {
+ name: '鎶曡瘔鍘熷洜TOP10',
+ type: 'bar',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ barWidth: '45%',
+ itemStyle: { color: '#86c9f4' },
+ label: { show: true, position: 'right', color: '#9EA7C4' },
+ data: dataAll.sort(),
+ },
+ ],
+ });
});
</script>
--
Gitblit v1.9.3