From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:20:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev
---
zhitan-vue/src/components/Echarts/LineChart.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 183 insertions(+), 0 deletions(-)
diff --git a/zhitan-vue/src/components/Echarts/LineChart.vue b/zhitan-vue/src/components/Echarts/LineChart.vue
new file mode 100644
index 0000000..8a1f434
--- /dev/null
+++ b/zhitan-vue/src/components/Echarts/LineChart.vue
@@ -0,0 +1,183 @@
+<template>
+ <div class="chart-item">
+ <div :id="domId" style="width: 100%; height: 100%"></div>
+ </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts"
+const { proxy } = getCurrentInstance()
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
+const emit = defineEmits()
+const props = defineProps({
+ chartData: {
+ type: Object,
+ default: () => {},
+ },
+ chartType: {
+ type: String,
+ default: "line", // bar
+ },
+ domId: {
+ type: String,
+ default: "ChartDom",
+ },
+})
+
+watch(
+ () => props.chartData,
+ (val) => {
+ console.log("watch", val)
+ initChart()
+ }
+)
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ initChart()
+ }
+)
+
+onMounted(() => {
+ initChart()
+})
+
+function initChart(value) {
+ console.log("initChart", props.chartData)
+ if (!props.chartData.xAxis) {
+ return
+ }
+ const chartDom = document.getElementById(props.domId)
+ if (echarts.getInstanceByDom(chartDom)) {
+ echarts.dispose(chartDom)
+ }
+ const myChart = echarts.init(chartDom)
+ // 澶勭悊澶氱郴鍒楁暟鎹�
+ const series = props.chartData.series.map((item) => ({
+ ...item,
+ name: item.name,
+ type: props.chartType, // 鏍规嵁浼犲叆绫诲瀷娓叉煋
+ data: item.data,
+ barWidth: props.chartData.barWidth || "16",
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ smooth: true, // 鍚敤骞虫粦鏇茬嚎
+ }))
+ console.log("initChart", series)
+ let option = {
+ title: {
+ text: props.chartData.title || "",
+ left: "40",
+ textStyle: {
+ color: "#2979ff",
+ },
+ },
+ color: ["#4dadf8", "#19be6b", "#ff9900", "#3d8a32", "#e8463a", "#ff4e3f"],
+ // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: props.chartData.series.map((item) => item.name), // 鍥句緥鏁版嵁
+ icon: "rect",
+ right: 40,
+ itemWidth: 14,
+ itemHeight: 10,
+ textStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ grid: {
+ top: "40",
+ left: "40",
+ right: "40",
+ bottom: "20",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ axisPointer: {
+ type: "shadow",
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [5, 0, 0, 0],
+ // formatter: '{value} ml'
+ },
+ data: props.chartData.xAxis,
+ },
+ yAxis: [
+ {
+ type: "value",
+ nameTextStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ },
+ },
+ ],
+ series: series,
+ }
+ setTimeout(() => {
+ myChart.setOption(option)
+ }, 200)
+
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart.resize()
+ },
+ { passive: true }
+ )
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-item {
+ width: 100%;
+ height: 360px !important;
+ margin-top: 0px;
+ padding-top: 20px;
+}
+</style>
--
Gitblit v1.9.3