From c353554427f56eeda8a7cb75cc12bfa572dd1c85 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 26 六月 2025 09:22:27 +0800
Subject: [PATCH] U 大小写问题
---
src/components/echarts/line-yj.vue | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 173 insertions(+), 0 deletions(-)
diff --git a/src/components/echarts/line-yj.vue b/src/components/echarts/line-yj.vue
new file mode 100644
index 0000000..7b0586e
--- /dev/null
+++ b/src/components/echarts/line-yj.vue
@@ -0,0 +1,173 @@
+<script setup>
+ import { onMounted, ref, watchEffect, nextTick, onBeforeUnmount } from "vue";
+ import * as echarts from 'echarts';
+ import baseChart from "./BaseChart.vue";
+
+ import { toFixed } from '@/utils/toFixed.js';
+
+ const chart = ref(null);
+ const props = defineProps({
+ title: {
+ type: String,
+ default: ''
+ },
+ unit: {
+ type: String,
+ default: ''
+ }
+ });
+
+ function getMax(data) {
+ let max = Math.max.apply(null, data) * 1.2;
+ return toFixed(max, 1) || 1;
+ }
+
+
+ function getOptions(xLabels, datas, mark) {
+ xLabels = xLabels || [];
+ datas = datas || [];
+ mark = mark || '';
+ const option = {
+ animation: false,
+ // title: {
+ // text: props.title,
+ // textStyle: {
+ // fontWeight: 'normal',
+ // fontSize: 14,
+ // color: '#fff'
+ // },
+ // left: '6%'
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 30,
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ // boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ data: xLabels
+ }],
+ yAxis: [{
+ type: 'value',
+ name: props.unit,
+ axisTick: {
+ show: true,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ margin: 10,
+ fontSize: 12,
+ color: '#fff'
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,0.2)'
+ }
+ },
+ max: getMax(datas),
+ }],
+ series: [{
+ // name: props.type,
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+ width: 1
+ },
+ // 娣诲姞鏍囪绾�
+ markLine: {
+ data: [
+ {
+ name: '鍛婅鍒嗙晫绾�',
+ xAxis: mark,
+ lineStyle: {
+ color: 'red',
+ type: 'dashed'
+ },
+ label: {
+ position: 'end',
+ formatter: '鍛婅鍒嗙晫绾�',
+ color: 'red'
+ },
+ animation: false,
+ }
+ ]
+ },
+ data: datas
+ }]
+ };
+
+ return option;
+ }
+
+ let myChart = null;
+ let chart_instance = null;
+
+ function initChart() {
+ if (chart.value) {
+ // myChart = chart.value.getChart();
+
+ let option = getOptions();
+ chart.value.setOption(option);
+ chart_instance = chart.value.getChart();
+ }
+ }
+
+ function updateChart(xLabels, datas, mark) {
+ if (chart.value) {
+ let option = getOptions(xLabels, datas, mark);
+ chart.value.setOption(option);
+ }
+ }
+
+ function getChart() {
+ return chart_instance;
+ }
+
+ defineExpose({
+ getChart,
+ updateChart
+ });
+
+ onMounted(() => {
+ // console.log('line mounted', '=============');
+
+ initChart();
+ });
+</script>
+
+<template>
+ <div class="line-chart">
+ <base-chart ref="chart"></base-chart>
+ </div>
+</template>
+
+<style scoped>
+.line-chart {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.1