From eed29804d3973801f8eac3ad9bead1e608f05b6a Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 20 七月 2024 22:31:56 +0800
Subject: [PATCH] 工单及自定义弹出窗口更新
---
src/views/demo/charts/Line.vue | 212 ++++++++++++++++++++++++++---------------------------
1 files changed, 104 insertions(+), 108 deletions(-)
diff --git a/src/views/demo/charts/Line.vue b/src/views/demo/charts/Line.vue
index c078942..272e2fb 100644
--- a/src/views/demo/charts/Line.vue
+++ b/src/views/demo/charts/Line.vue
@@ -1,117 +1,113 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
-<script lang="ts">
- import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
- import { useECharts } from '/@/hooks/web/useECharts';
+<script lang="ts" setup>
+ import { PropType, ref, Ref, onMounted } from 'vue';
+ import { useECharts } from '@/hooks/web/useECharts';
import { getLineData } from './data';
- 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, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
- const { barData, lineData, category } = getLineData;
- onMounted(() => {
- setOptions({
- backgroundColor: '#0f375f',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- show: true,
- backgroundColor: '#333',
- },
- },
- },
- legend: {
- data: ['line', 'bar'],
- textStyle: {
- color: '#ccc',
- },
- },
- xAxis: {
- data: category,
- axisLine: {
- lineStyle: {
- color: '#ccc',
- },
- },
- },
- yAxis: {
- splitLine: { show: false },
- axisLine: {
- lineStyle: {
- color: '#ccc',
- },
- },
- },
- series: [
- {
- name: 'line',
- type: 'line',
- smooth: true,
- showAllSymbol: 'auto',
- symbol: 'emptyCircle',
- symbolSize: 15,
- data: lineData,
- },
- {
- name: 'bar',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- borderRadius: 5,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#14c8d4' },
- { offset: 1, color: '#43eec6' },
- ]),
- },
- data: barData,
- },
- {
- name: 'line',
- type: 'bar',
- barGap: '-100%',
- barWidth: 10,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(20,200,212,0.5)' },
- { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
- { offset: 1, color: 'rgba(20,200,212,0)' },
- ]),
- },
- z: -12,
- data: lineData,
- },
- {
- name: 'dotted',
- type: 'pictorialBar',
- symbol: 'rect',
- itemStyle: {
- color: '#0f375f',
- },
- symbolRepeat: true,
- symbolSize: [12, 4],
- symbolMargin: 1,
- z: -10,
- data: lineData,
- },
- ],
- });
- });
- return { chartRef };
+ height: {
+ type: String as PropType<string>,
+ default: 'calc(100vh - 78px)',
},
});
+
+ const chartRef = ref<HTMLDivElement | null>(null);
+ const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+ const { barData, lineData, category } = getLineData;
+
+ onMounted(() => {
+ setOptions({
+ backgroundColor: '#0f375f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true,
+ backgroundColor: '#333',
+ },
+ },
+ },
+ legend: {
+ data: ['line', 'bar'],
+ textStyle: {
+ color: '#ccc',
+ },
+ },
+ xAxis: {
+ data: category,
+ axisLine: {
+ lineStyle: {
+ color: '#ccc',
+ },
+ },
+ },
+ yAxis: {
+ splitLine: { show: false },
+ axisLine: {
+ lineStyle: {
+ color: '#ccc',
+ },
+ },
+ },
+ series: [
+ {
+ name: 'line',
+ type: 'line',
+ smooth: true,
+ showAllSymbol: 'auto',
+ symbol: 'emptyCircle',
+ symbolSize: 15,
+ data: lineData,
+ },
+ {
+ name: 'bar',
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ borderRadius: 5,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#14c8d4' },
+ { offset: 1, color: '#43eec6' },
+ ]),
+ },
+ data: barData,
+ },
+ {
+ name: 'line',
+ type: 'bar',
+ barGap: '-100%',
+ barWidth: 10,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(20,200,212,0.5)' },
+ { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+ { offset: 1, color: 'rgba(20,200,212,0)' },
+ ]),
+ },
+ z: -12,
+ data: lineData,
+ },
+ {
+ name: 'dotted',
+ type: 'pictorialBar',
+ symbol: 'rect',
+ itemStyle: {
+ color: '#0f375f',
+ },
+ symbolRepeat: true,
+ symbolSize: [12, 4],
+ symbolMargin: 1,
+ z: -10,
+ data: lineData,
+ },
+ ],
+ });
+ });
</script>
--
Gitblit v1.9.3