From 191de5bd0b1ef90a8b91535dd2ef24d0d83cb576 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 23 Sep 2024 09:36:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=BB=E5=80=9F=E9=98=85=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=BF=94=E5=9B=9E=E5=BE=97=E6=9D=A5=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echart/lineChart.vue | 334 ++++++++++++++--------------
 1 file changed, 169 insertions(+), 165 deletions(-)

diff --git a/src/components/echart/lineChart.vue b/src/components/echart/lineChart.vue
index ce66eb0..7082270 100644
--- a/src/components/echart/lineChart.vue
+++ b/src/components/echart/lineChart.vue
@@ -1,165 +1,169 @@
-<template>
-  <div id="main" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from '@/utils/resizeMixins.js'
-
-export default {
-  name: 'AcrossEcharts',
-  mixins: [resize],
-  props: {
-    chartData: {
-      type: Object,
-      require: true,
-      default: function() {
-        return {}
-      }
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '100%'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    'chartData': {
-      handler(val) {
-        setTimeout(() => {
-          this.drawChart()
-        }, 100)
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  mounted() {
-    this.drawChart()
-    window.addEventListener('resize', this.__resizeHandler)
-  },
-  methods: {
-    drawChart() {
-      const chartDom = document.getElementById('main')
-      this.chart = echarts.init(chartDom)
-      let option = null
-      option = {
-        grid: { // 边距
-          left: '2%',
-          right: '2%',
-          bottom: '5%',
-          top: '8%',
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#339cff'
-            }
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: this.chartData.totalLendMonth,
-          axisLine: { // 轴线的颜色以及宽度
-            lineStyle: {
-              color: 'rgba(17, 61, 114,0.5)'
-            }
-          },
-          axisTick: { show: false },
-          axisLabel: { // x轴文字的配置
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          min: 5000,
-          max: 25000,
-          splitNumber: 5,
-          axisLine: {
-            show: false
-          },
-          axisLabel: { // x轴文字的配置
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          axisTick: { // 刻度线隐藏
-            show: false
-          },
-          splitLine: { // 分割线配置
-            lineStyle: {
-              color: 'rgba(17, 61, 114,0.5)',
-              type: 'solid'
-            }
-          }
-        },
-        series: [
-          {
-            name: '借阅量',
-            data: this.chartData.totalLendData,
-            type: 'line',
-            areaStyle: {
-              normal: {
-                color: {
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0.1,
-                      color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.5,
-                      color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.7,
-                      color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.9,
-                      color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色
-                    }
-                  ]
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#339CFF', // 改变折线点的颜色
-                lineStyle: {
-                  color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色
-                }
-              }
-            }
-          }
-        ]
-      }
-      option && this.chart.setOption(option)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.h{
-  color: rgb(26, 201, 255);
-}
-</style>
+<template>
+  <div id="main" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/utils/resizeMixins.js'
+
+export default {
+  name: 'AcrossEcharts',
+  mixins: [resize],
+  props: {
+    chartData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    'chartData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.drawChart()
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('main')
+      this.chart = echarts.init(chartDom)
+      let option = null
+      option = {
+        grid: { // 边距
+          left: '2%',
+          right: '2%',
+          bottom: '5%',
+          top: '8%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#339cff'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.totalLendMonth,
+          axisLine: { // 轴线的颜色以及宽度
+            lineStyle: {
+              color: 'rgba(17, 61, 114,0.5)'
+            }
+          },
+          axisTick: { show: false },
+          axisLabel: { // x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          // min: 5000,
+          // max: 25000,
+          min: 0,
+          max: function(value) {
+            return Math.ceil(value.max + (value.max - value.min) * 0.2)
+          },
+          splitNumber: 5,
+          axisLine: {
+            show: false
+          },
+          axisLabel: { // x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: { // 刻度线隐藏
+            show: false
+          },
+          splitLine: { // 分割线配置
+            lineStyle: {
+              color: 'rgba(17, 61, 114,0.5)',
+              type: 'solid'
+            }
+          }
+        },
+        series: [
+          {
+            name: '借阅量',
+            data: this.chartData.totalLendData,
+            type: 'line',
+            areaStyle: {
+              normal: {
+                color: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.1,
+                      color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.5,
+                      color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.7,
+                      color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.9,
+                      color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色
+                    }
+                  ]
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#339CFF', // 改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色
+                }
+              }
+            }
+          }
+        ]
+      }
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h{
+  color: rgb(26, 201, 255);
+}
+</style>