From 828999d7e529182c0339161b5ed6d07bdc03eb65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2=E5=B0=98=E6=98=9F=E5=AE=87?=
 <7993891+chenhongliang_chl@user.noreply.gitee.com>
Date: Thu, 11 Mar 2021 17:34:38 +0800
Subject: [PATCH] =?UTF-8?q?update=20src/components/dashboard/LineChart.vue?=
 =?UTF-8?q?.=202021/03/11=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/LineChart.vue | 285 +++++++------------------
 1 file changed, 80 insertions(+), 205 deletions(-)

diff --git a/src/components/dashboard/LineChart.vue b/src/components/dashboard/LineChart.vue
index c53cafc..296e189 100644
--- a/src/components/dashboard/LineChart.vue
+++ b/src/components/dashboard/LineChart.vue
@@ -12,16 +12,8 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-
   export default {
     props: {
-      legend: {
-        type: Object,
-        default: () => {
-          return {show: true}
-        }
-      },
       grid: {
         type: Object,
         default: () => {
@@ -35,24 +27,11 @@
         }
       }
     },
-    computed: {
-      ...mapState({
-        setting: state => state.setting.setting
-      })
-    },
-    watch: { 
-      'setting.themeModel': {
-        handler(theme) {
-          // this.getTheme(theme)
-        },
-        immediate: true
-      }
-    },
     data() {
       return {
         chart: '',
         data: {},
-      };
+      }
     },
     mounted() {
       this.getData()
@@ -62,7 +41,6 @@
       this.removeWindowsResize()
     },
     methods: {
-      // 获取数据
       getData() {
         this.data.xData = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
 
@@ -79,51 +57,24 @@
         this.chart = chart
         let _this = this
 
-        // 绘制图表
         chart.setOption({
           color: ['#308FF0', '#74D488'],
           tooltip: {
             trigger: 'axis',
             formatter: function (params) {
-              let value1 = params[0].value
-              let value2 = params[1].value
-              return `浏览量：${value2}<br/> 访问数：${value1}`;
-            },
-            axisPointer: {
-              animation: false
+              return `浏览量：${params[0].value}<br/> 访问数：${params[1].value}`
             }
           },
-          legend: {
-            show: false,
-            icon: "circle", // 形状 circle, rect , roundRect, triangle, diamond, pin, arrow, none
-            type: 'plain',
-            top: '3%',
-            left: 15,
-            itemWidth: 16,  // 设置宽度
-            itemHeight: 8,  // 设置高度
-            itemGap: 13,    // 设置间距
-            textStyle: {    //图例文字的样式
-              color: '#999',
-              fontSize: 12,
-              padding: [2, 0, 0, 0]
-            },
-          },
           grid: this.grid,
           xAxis: {
             data: this.data.xData,
             show: true,
-            position: 'bottom',  // x轴的位置
-            offset: 8, // x轴相对于默认位置的偏移
-            type: 'category',   // 轴类型， 默认为 'category'
-            nameGap: 15, // 坐标轴名称与轴线之间的距离
-            nameRotate: 0,  // 坐标轴名字旋转
-            axisLabel: {//x轴文字的配置
-              show: true,
-              textStyle: {
-                color: "#9FA2AF",
-              }
-            },
-            axisLine: {       // 坐标轴 轴线
+            position: 'bottom',
+            offset: 8,
+            type: 'category',
+            nameGap: 15,
+            nameRotate: 0,
+            axisLine: {
               show: false,
               lineStyle: {
                 color: '#999',
@@ -131,181 +82,105 @@
                 type: 'solid'
               }
             },
-            axisTick:{ //x轴刻度线
+            axisTick:{
               show: false
-            },
+            }
           },
           yAxis: {
             show: true,
-            position: 'left', // y轴位置
-            offset: -20, // y轴相对于默认位置的偏移
-            type: 'value',  // 轴类型，默认为 ‘category’
-            nameLocation: 'end', // 轴名称相对位置value
-            nameTextStyle: {    // 坐标轴名称样式
+            position: 'left',
+            offset: -20,
+            type: 'value',
+            nameLocation: 'end',
+            nameTextStyle: {
               color: '#fff',
-              padding: [5, 0, 0, 5]  // 坐标轴名称相对位置
+              padding: [5, 0, 0, 5]
             },
-            nameRotate: 270,  // 坐标轴名字旋转
-            splitLine: {    // gird 区域中的分割线
+            nameRotate: 270,
+            splitLine: {
               show: false, 
               lineStyle: {
                 color: '#eee',
                 width: 1,
                 type: 'solid'
               }
-            },
-            axisTick: {      // 坐标轴的刻度
-              show: false,  
-              length: 0,      // 长度
-              lineStyle: {
-                color: 'red',  // 默认取轴线的颜色
-                width: 1,
-                type: 'solid'
-              }
-            },
-            axisLabel: {      // 坐标轴的标签
-              show: true,  
-              inside: false,  // 是否朝内
-              rotate: 0,     // 旋转角度
-              margin: 8,     // 刻度标签与轴线之间的距离
-              color: '#9FA2AF',  // 默认轴线的颜色
             }
           },
           series: [
-            {
-              name: "浏览量",
-              type: "line",
-              smooth: true,
-              symbol: 'circle',//拐点样式
-              symbolSize: 2,   //拐点圆的大小
-              itemStyle: {
-                normal: {
-                  lineStyle: {
-                    // 系列级个性化折线样式
-                    width: 2,
-                    type: "solid",
-                    color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: "#308FF0"
-                      },
-                      {
-                        offset: 1,
-                        color: "#308FF0"
-                      }
-                    ]) //线条渐变色
-                  }
-                },
-                emphasis: {
-                  color: "#308FF0",
-                  lineStyle: {
-                    // 系列级个性化折线样式
-                    width: 2,
-                    type: "solid",
-                    color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: "#308FF0"
-                      },
-                      {
-                        offset: 1,
-                        color: "#308FF0"
-                      }
-                    ])
-                  }
-                }
-              }, 
-              areaStyle: {
-                normal: {
-                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-                  color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: 'rgba(45, 140, 240, 0.3)'
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(45, 140, 240, 0)'
-                    }
-                  ])
-                }
-              },
-              data: this.data.data[0]
-            },
-            {
-              name: "访问数",
-              type: "line",
-              smooth: true,
-              symbol: 'circle',//拐点样式
-              symbolSize: 2,   //拐点圆的大小
-              itemStyle: {
-                normal: {
-                  lineStyle: {
-                    // 系列级个性化折线样式
-                    width: 2,
-                    type: "solid",
-                    color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: "#74D488"
-                      },
-                      {
-                        offset: 1,
-                        color: "#74D488"
-                      }
-                    ]) //线条渐变色
-                  }
-                },
-                emphasis: {
-                  color: "#74D488",
-                  lineStyle: {
-                    // 系列级个性化折线样式
-                    width: 2,
-                    type: "solid",
-                    color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: "#74D488"
-                      },
-                      {
-                        offset: 1,
-                        color: "#74D488"
-                      }
-                    ])
-                  }
-                }
-              }, //线条样式
-              areaStyle: {
-                normal: {
-                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-                  color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: 'rgba(119, 213, 138, 0.3)'
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(119, 213, 138, 0)'
-                    }
-                  ])
-                }
-              }, 
-              data: this.data.data[1]
-            }
+            this.seriesItem(
+              _this.$echarts, 
+              this.data.data[0], 
+              ['#308FF0', '#308FF0'], 
+              ['rgba(45, 140, 240, 0.3)', 'rgba(45, 140, 240, 0)']
+            ),
+            this.seriesItem(
+              _this.$echarts, 
+              this.data.data[1], 
+              ['#74D488', '#74D488'], 
+              ['rgba(119, 213, 138, 0.3)', 'rgba(119, 213, 138, 0)']
+            ),
           ]
         })
       },
       windowsResize() {
         window.addEventListener('resize', () => {
-          this.chart.resize();
+          this.chart.resize()
         })
       },
       removeWindowsResize() {
         window.removeEventListener('resize', this.windowsResize)
         this.chart.dispose()
       },
+      seriesItem(charts, data, lineColor, linearColor) {
+        return {
+          type: "line",
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 2,
+          itemStyle: {
+            normal: {
+              lineStyle: {  //线条渐变色
+                width: 2,
+                type: "solid",
+                color: new charts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: lineColor[0]
+                  },
+                  {
+                    offset: 1,
+                    color: lineColor[1]
+                  }
+                ]) 
+              }
+            },
+            emphasis: {
+              color: "#308FF0",
+              lineStyle: {
+                width: 2,
+                type: "solid"
+              }
+            }
+          }, 
+          areaStyle: {
+            normal: {
+              color: new charts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: linearColor[0]
+                },
+                {
+                  offset: 1,
+                  color: linearColor[1]
+                }
+              ])
+            }
+          },
+          data
+        }
+      }
     }
-  };
+  }
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee