Merge branch 'feature/tyler-3368'

package.json

@@ -21,7 +21,6 @@
     "core-js": "3.6.5",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
-    "echarts": "4.2.1",
     "element-ui": "^2.15.12",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
@@ -61,6 +60,7 @@
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
+    "echarts": "^5.4.3",
     "eslint": "6.7.2",
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",

src/components/Charts/Keyboard.vue

@@ -1,155 +1,155 @@
-<template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      const xAxisData = []
-      const data = []
-      const data2 = []
-      for (let i = 0; i < 50; i++) {
-        xAxisData.push(i)
-        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
-        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
-      }
-      this.chart.setOption({
-        backgroundColor: '#08263a',
-        grid: {
-          left: '5%',
-          right: '5%'
-        },
-        xAxis: [{
-          show: false,
-          data: xAxisData
-        }, {
-          show: false,
-          data: xAxisData
-        }],
-        visualMap: {
-          show: false,
-          min: 0,
-          max: 50,
-          dimension: 0,
-          inRange: {
-            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-          }
-        },
-        yAxis: {
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#4a657a'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#08263f'
-            }
-          },
-          axisTick: {
-            show: false
-          }
-        },
-        series: [{
-          name: 'back',
-          type: 'bar',
-          data: data2,
-          z: 1,
-          itemStyle: {
-            normal: {
-              opacity: 0.4,
-              barBorderRadius: 5,
-              shadowBlur: 3,
-              shadowColor: '#111'
-            }
-          }
-        }, {
-          name: 'Simulate Shadow',
-          type: 'line',
-          data,
-          z: 2,
-          showSymbol: false,
-          animationDelay: 0,
-          animationEasing: 'linear',
-          animationDuration: 1200,
-          lineStyle: {
-            normal: {
-              color: 'transparent'
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: '#08263a',
-              shadowBlur: 50,
-              shadowColor: '#000'
-            }
-          }
-        }, {
-          name: 'front',
-          type: 'bar',
-          data,
-          xAxisIndex: 1,
-          z: 3,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5
-            }
-          }
-        }],
-        animationEasing: 'elasticOut',
-        animationEasingUpdate: 'elasticOut',
-        animationDelay(idx) {
-          return idx * 20
-        },
-        animationDelayUpdate(idx) {
-          return idx * 20
-        }
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption({
+        backgroundColor: '#08263a',
+        grid: {
+          left: '5%',
+          right: '5%'
+        },
+        xAxis: [{
+          show: false,
+          data: xAxisData
+        }, {
+          show: false,
+          data: xAxisData
+        }],
+        visualMap: {
+          show: false,
+          min: 0,
+          max: 50,
+          dimension: 0,
+          inRange: {
+            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#4a657a'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#08263f'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'back',
+          type: 'bar',
+          data: data2,
+          z: 1,
+          itemStyle: {
+            normal: {
+              opacity: 0.4,
+              barBorderRadius: 5,
+              shadowBlur: 3,
+              shadowColor: '#111'
+            }
+          }
+        }, {
+          name: 'Simulate Shadow',
+          type: 'line',
+          data,
+          z: 2,
+          showSymbol: false,
+          animationDelay: 0,
+          animationEasing: 'linear',
+          animationDuration: 1200,
+          lineStyle: {
+            normal: {
+              color: 'transparent'
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: '#08263a',
+              shadowBlur: 50,
+              shadowColor: '#000'
+            }
+          }
+        }, {
+          name: 'front',
+          type: 'bar',
+          data,
+          xAxisIndex: 1,
+          z: 3,
+          itemStyle: {
+            normal: {
+              barBorderRadius: 5
+            }
+          }
+        }],
+        animationEasing: 'elasticOut',
+        animationEasingUpdate: 'elasticOut',
+        animationDelay(idx) {
+          return idx * 20
+        },
+        animationDelayUpdate(idx) {
+          return idx * 20
+        }
+      })
+    }
+  }
+}
+</script>

src/components/Charts/LineMarker.vue

@@ -1,227 +1,227 @@
-<template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      this.chart.setOption({
-        backgroundColor: '#394056',
-        title: {
-          top: 20,
-          text: 'Requests',
-          textStyle: {
-            fontWeight: 'normal',
-            fontSize: 16,
-            color: '#F1F1F3'
-          },
-          left: '1%'
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          }
-        },
-        legend: {
-          top: 20,
-          icon: 'rect',
-          itemWidth: 14,
-          itemHeight: 5,
-          itemGap: 13,
-          data: ['CMCC', 'CTCC', 'CUCC'],
-          right: '4%',
-          textStyle: {
-            fontSize: 12,
-            color: '#F1F1F3'
-          }
-        },
-        grid: {
-          top: 100,
-          left: '2%',
-          right: '2%',
-          bottom: '2%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
-        }],
-        yAxis: [{
-          type: 'value',
-          name: '(%)',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          axisLabel: {
-            margin: 10,
-            textStyle: {
-              fontSize: 14
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          }
-        }],
-        series: [{
-          name: 'CMCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(137, 189, 27, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(137, 189, 27, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(137,189,27)',
-              borderColor: 'rgba(137,189,2,0.27)',
-              borderWidth: 12
-
-            }
-          },
-          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-        }, {
-          name: 'CTCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(0, 136, 212, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(0, 136, 212, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(0,136,212)',
-              borderColor: 'rgba(0,136,212,0.2)',
-              borderWidth: 12
-
-            }
-          },
-          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-        }, {
-          name: 'CUCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(219, 50, 51, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(219, 50, 51, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(219,50,51)',
-              borderColor: 'rgba(219,50,51,0.2)',
-              borderWidth: 12
-            }
-          },
-          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-        }]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          top: 20,
+          text: 'Requests',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['CMCC', 'CTCC', 'CUCC'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(%)',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: 'CMCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+        }, {
+          name: 'CTCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12
+
+            }
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+        }, {
+          name: 'CUCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+        }]
+      })
+    }
+  }
+}
+</script>

src/components/Charts/MixChart.vue

@@ -1,271 +1,271 @@
-<template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-      const xData = (function() {
-        const data = []
-        for (let i = 1; i < 13; i++) {
-          data.push(i + 'month')
-        }
-        return data
-      }())
-      this.chart.setOption({
-        backgroundColor: '#344b58',
-        title: {
-          text: 'statistics',
-          x: '20',
-          top: '20',
-          textStyle: {
-            color: '#fff',
-            fontSize: '22'
-          },
-          subtextStyle: {
-            color: '#90979c',
-            fontSize: '16'
-          }
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            textStyle: {
-              color: '#fff'
-            }
-          }
-        },
-        grid: {
-          left: '5%',
-          right: '5%',
-          borderWidth: 0,
-          top: 150,
-          bottom: 95,
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        legend: {
-          x: '5%',
-          top: '10%',
-          textStyle: {
-            color: '#90979c'
-          },
-          data: ['female', 'male', 'average']
-        },
-        calculable: true,
-        xAxis: [{
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitArea: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-
-          },
-          data: xData
-        }],
-        yAxis: [{
-          type: 'value',
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-          },
-          splitArea: {
-            show: false
-          }
-        }],
-        dataZoom: [{
-          show: true,
-          height: 30,
-          xAxisIndex: [
-            0
-          ],
-          bottom: 30,
-          start: 10,
-          end: 80,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '110%',
-          handleStyle: {
-            color: '#d3dee5'
-
-          },
-          textStyle: {
-            color: '#fff' },
-          borderColor: '#90979c'
-
-        }, {
-          type: 'inside',
-          show: true,
-          height: 15,
-          start: 1,
-          end: 35
-        }],
-        series: [{
-          name: 'female',
-          type: 'bar',
-          stack: 'total',
-          barMaxWidth: 35,
-          barGap: '10%',
-          itemStyle: {
-            normal: {
-              color: 'rgba(255,144,128,1)',
-              label: {
-                show: true,
-                textStyle: {
-                  color: '#fff'
-                },
-                position: 'insideTop',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            709,
-            1917,
-            2455,
-            2610,
-            1719,
-            1433,
-            1544,
-            3285,
-            5208,
-            3372,
-            2484,
-            4078
-          ]
-        },
-
-        {
-          name: 'male',
-          type: 'bar',
-          stack: 'total',
-          itemStyle: {
-            normal: {
-              color: 'rgba(0,191,183,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            327,
-            1776,
-            507,
-            1200,
-            800,
-            482,
-            204,
-            1390,
-            1001,
-            951,
-            381,
-            220
-          ]
-        }, {
-          name: 'average',
-          type: 'line',
-          stack: 'total',
-          symbolSize: 10,
-          symbol: 'circle',
-          itemStyle: {
-            normal: {
-              color: 'rgba(252,230,48,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            1036,
-            3693,
-            2962,
-            3810,
-            2519,
-            1915,
-            1748,
-            4675,
-            6209,
-            4323,
-            2865,
-            4298
-          ]
-        }
-        ]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = (function() {
+        const data = []
+        for (let i = 1; i < 13; i++) {
+          data.push(i + 'month')
+        }
+        return data
+      }())
+      this.chart.setOption({
+        backgroundColor: '#344b58',
+        title: {
+          text: 'statistics',
+          x: '20',
+          top: '20',
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          borderWidth: 0,
+          top: 150,
+          bottom: 95,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: '5%',
+          top: '10%',
+          textStyle: {
+            color: '#90979c'
+          },
+          data: ['female', 'male', 'average']
+        },
+        calculable: true,
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+
+          },
+          data: xData
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+          },
+          splitArea: {
+            show: false
+          }
+        }],
+        dataZoom: [{
+          show: true,
+          height: 30,
+          xAxisIndex: [
+            0
+          ],
+          bottom: 30,
+          start: 10,
+          end: 80,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: '#d3dee5'
+
+          },
+          textStyle: {
+            color: '#fff' },
+          borderColor: '#90979c'
+
+        }, {
+          type: 'inside',
+          show: true,
+          height: 15,
+          start: 1,
+          end: 35
+        }],
+        series: [{
+          name: 'female',
+          type: 'bar',
+          stack: 'total',
+          barMaxWidth: 35,
+          barGap: '10%',
+          itemStyle: {
+            normal: {
+              color: 'rgba(255,144,128,1)',
+              label: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                },
+                position: 'insideTop',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            709,
+            1917,
+            2455,
+            2610,
+            1719,
+            1433,
+            1544,
+            3285,
+            5208,
+            3372,
+            2484,
+            4078
+          ]
+        },
+
+        {
+          name: 'male',
+          type: 'bar',
+          stack: 'total',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,191,183,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            327,
+            1776,
+            507,
+            1200,
+            800,
+            482,
+            204,
+            1390,
+            1001,
+            951,
+            381,
+            220
+          ]
+        }, {
+          name: 'average',
+          type: 'line',
+          stack: 'total',
+          symbolSize: 10,
+          symbol: 'circle',
+          itemStyle: {
+            normal: {
+              color: 'rgba(252,230,48,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            1036,
+            3693,
+            2962,
+            3810,
+            2519,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298
+          ]
+        }
+        ]
+      })
+    }
+  }
+}
+</script>

src/components/TreeChart/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="echarts-container" />
+</template>
+<script>
+import * as echarts from 'echarts/core'
+import { TooltipComponent } from 'echarts/components'
+import { TreeChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
+let myChart
+let option
+export default {
+  name: 'TreeChart',
+  props: {
+    treeData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    // 监听树图节点的点击事件
+    myChart.on('click', (e) => {
+      // console.log('e:', e)
+      this.$emit('clickNode', e)
+    })
+  },
+  methods: {
+    init() {
+      // console.log('$el:', this.$el)
+      myChart = echarts.init(this.$el)
+      option = {
+        tooltip: { // 提示框浮层设置
+          trigger: 'item',
+          triggerOn: 'mousemove', // 提示框触发条件
+          enterable: true, // 鼠标是否可进入提示框浮层中，默认false
+          confine: true, // 是否将tooltip框限制在图表的区域内
+          formatter: function(params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
+            // console.log('params:', params)
+            return params.marker + params.name + '<br/>' + '$ ' + (params.value || '--')
+          },
+          // valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
+          //   return '$' + value.toFixed(2)
+          // },
+          backgroundColor: '#FFF', // 提示框浮层的背景颜色
+          borderColor: '#1890FF', // 提示框浮层的边框颜色
+          borderWidth: 1, // 提示框浮层的边框宽
+          borderRadius: 8, // 提示框浮层圆角
+          padding: [6, 8], // 提示框浮层的内边距
+          textStyle: { // 提示框浮层的文本样式
+            color: '#333', // 文字颜色
+            fontWeight: 400, // 字体粗细
+            fontSize: 16, // 字体大小
+            lineHeight: 20, // 行高
+            width: 60, // 文本显示宽度
+            // 文字超出宽度是否截断或者换行；只有配置width时有效
+            overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+            ellipsis: '...'
+          },
+          extraCssText: 'box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: right;' // 额外添加到浮层的css样式
+        },
+        series: [
+          {
+            width: '100%',
+            height: '100%',
+            type: 'tree',
+            data: [this.treeData],
+            name: '树图',
+            top: '10%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
+            left: '5%', // 组件离容器左侧的距离
+            bottom: '1%', // 组件离容器下侧的距离
+            right: '2%', // 组件离容器右侧的距离
+            layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
+            orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
+            edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
+            roam: true, // 是否开启鼠标缩放或平移，默认false
+            scaleLimit: {
+              min: 0.5,
+              max: 10
+            },
+            initialTreeDepth: 5, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
+            // symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
+            symbolRotate: 270, // 配合arrow图形使用效果较好
+            symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小
+            itemStyle: { // 树图中每个节点的样式
+              color: '#1890FF', // 节点未展开时的填充色
+              borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
+              borderWidth: 1, // 描边线宽，为0时无描边
+              borderType: 'dotted', // 描边类型
+              borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+              shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
+              shadowBlur: 16, // 图形阴影的模糊大小
+              opacity: 1 // 图形透明度
+            },
+            label: { // 每个节点对应的文本标签样式
+              show: true, // 是否显示标签
+              distance: 8, // 文本距离图形元素的距离
+              position: 'left', // 标签位置
+              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
+              align: 'center', // 文字水平对齐方式，默认自动，left，right，center
+              fontSize: 16, // 字体大小
+              color: '#333', // 字体颜色
+              backgroundColor: '#F0F5FA', // 文字块的背景颜色
+              borderColor: '#1890FF', // 文字块边框颜色
+              borderWidth: 1, // 文字块边框宽度
+              borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
+              borderRadius: 4, // 文字块的圆角
+              padding: [6, 12], // 文字块内边距
+              shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
+              shadowBlur: 6, // 文字块的背景阴影长度
+              width: 60,
+              // 文字超出宽度是否截断或者换行；只有配置width时有效
+              overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+              ellipsis: '...'
+            },
+            lineStyle: { // 树图边的样式
+              color: 'rgba(0,0,0,.35)', // 树图边的颜色
+              width: 2, // 树图边的宽度
+              curveness: 0.5, // 树图边的曲度
+              shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+              shadowBlur: 10 // 图形阴影的模糊大小
+            },
+            emphasis: { // 树图中图形和标签高亮的样式
+              disabled: false, // 是否关闭高亮状态，默认false
+              // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
+              focus: 'self', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
+              blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
+              itemStyle: { // 该节点的样式
+                color: '#1890FF', // 图形的颜色
+                // borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
+                borderWidth: 1, // 描边线宽，为0时无描边
+                borderType: 'solid', // 描边类型 solid dashed dotted
+                borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+                shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
+                shadowBlur: 12, // 图形阴影的模糊大小
+                opacity: 1 // 图形透明度
+              },
+              lineStyle: { // 树图边的样式
+                color: 'rgba(0,0,0,.45)', // 树图边的颜色
+                width: 2, // 树图边的宽度
+                curveness: 0.5, // 树图边的曲度
+                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+                shadowBlur: 6 // 图形阴影的模糊大小
+              },
+              label: { // 高亮标签的文本样式
+                color: '#333',
+                fontWeight: 600
+              }
+            },
+            blur: { // 淡出状态的相关配置，开启emphasis.focus后有效
+              itemStyle: {}, // 节点的样式
+              lineStyle: {}, // 树图边的样式
+              label: {} // 淡出标签的文本样式
+            },
+            leaves: { // 叶子节点的特殊配置
+              label: { // 叶子节点的文本标签样式
+                distance: 8,
+                // color: '#1890FF',
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
+              },
+              itemStyle: {}, // 叶子节点的样式
+              emphasis: {}, // 叶子节点高亮状态的配置
+              blur: {}, // 叶子节点淡出状态的配置
+              select: {} // 叶子节点选中状态的配置
+            },
+            animation: true, // 是否开启动画
+            expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
+            animationDuration: 550, // 初始动画的时长
+            animationEasing: 'linear', // 初始动画的缓动效果
+            animationDelay: 0, // 初始动画的延迟
+            animationDurationUpdate: 750, // 数据更新动画的时长
+            animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
+            animationDelayUpdate: 0 // 数据更新动画的延迟
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts-container {
+  width: 100%;
+  height: calc( 100vh - 100px )
+}
+</style>

src/router/modules/atlas.js

@@ -7,19 +7,31 @@ const atlasRouter = {
   hidden: true,
   children: [
     {
-      path: 'network',  // 安置网络
+      path: 'network', // 安置网络
       component: () => import('@/views/atlas/placement-network'),
       name: 'placementNetwork',
       meta: { title: 'Placement Network', icon: 'user', noCache: true }
     },
     {
-      path: 'relation',  // 推荐网络
+      path: 'relation', // 推荐网络
       component: () => import('@/views/atlas/sponsor-network'),
       name: 'sponsorNetwork',
       meta: { title: 'Sponsor Network', icon: 'user', noCache: true }
     },
     {
-      path: 'brand-ambassador-list',  // BA会员列表
+      path: 'network-ex', // 安置网络Ex
+      component: () => import('@/views/atlas/placement-network-ex'),
+      name: 'PlacementNetworkEx',
+      meta: { title: 'Placement Network Ex', icon: 'user', noCache: true }
+    },
+    {
+      path: 'relation-ex', // 推荐网络Ex
+      component: () => import('@/views/atlas/sponsor-network-ex'),
+      name: 'SponsorNetworkEx',
+      meta: { title: 'Sponsor Network Ex', icon: 'user', noCache: true }
+    },
+    {
+      path: 'brand-ambassador-list', // BA会员列表
       component: () => import('@/views/atlas/brand-ambassador-list'),
       name: 'BrandAmbassadorList',
       meta: { title: 'Brand Ambassador List', icon: 'user', noCache: true }

src/views/atlas/placement-network-ex.vue

@@ -0,0 +1,215 @@
+
+<template>
+  <div>
+    <div v-if="treeChartShow" class="tree-chart">
+      <tree-chart :tree-data="treeData" @clickNode="getNodeData" />
+    </div>
+  </div>
+</template>
+<script>
+import treeChart from '@/components/TreeChart/index.vue'
+import { fetchMainUserInfo, fetchPlacementNetwork, fetchPlacementNetworkList } from '@/api/atlas'
+import tool from '@/utils/tool'
+
+export default {
+  name: 'PlacementNetworkEx',
+  components: {
+    treeChart
+  },
+  data() {
+    return {
+      treeChartShow: false,
+      treeData: {
+        name: null,
+        children: null
+      },
+      tool: tool,
+      expandDeep: 5,
+      topDeep: 0,
+      mainUserName: '',
+      periodNum: null,
+      listPeriodNum: null,
+      filterForm: {
+        userName: null,
+        deep: 5,
+        periodNum: null,
+        page: 1,
+        pageSize: 20
+      },
+      listTopDeep: 0,
+      loading: false,
+      children: [
+        {
+          name: '比较',
+          value: 29,
+          children: [
+            {
+              name: '折线图',
+              value: 1
+            },
+            {
+              name: '面积图',
+              value: 2
+            },
+            {
+              name: '柱状图',
+              value: 3
+            }
+          ]
+        },
+        {
+          name: '趋势趋势趋势趋势趋势趋势趋势趋势趋势趋势',
+          value: 9,
+          children: [
+            {
+              name: '折线图',
+              value: 1
+            },
+            {
+              name: '阶梯图',
+              value: 2
+            },
+            {
+              name: '面积图',
+              value: 3
+            },
+            {
+              name: '堆叠面积图',
+              value: 4
+            }
+          ]
+        },
+        {
+          name: '组成'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // this.getList()
+    this.getMainData(null, true)
+  },
+  methods: {
+    getNodeData(e) {
+      console.log(e)
+      if (e.collapsed === false) {
+        console.log(e.name + '---节点展开')
+      }
+    },
+    getList() {
+      this.treeData = {
+        name: 'test',
+        children: this.children
+      }
+    },
+    getMainData(userName = null, getList = false) {
+      const that = this
+      this.$message({
+        message: that.$t('common.awaitData')
+      })
+      let params = {
+        periodNum: that.periodNum
+      }
+      if (that.mainUserName !== null) {
+        params = { userName: that.mainUserName, periodNum: that.periodNum }
+      }
+      this.loading = true
+      fetchMainUserInfo(params).then(response => {
+        const treeData = Object.assign(response.data[0])
+        console.log(treeData)
+        that.treeData = {
+          name: treeData.USER_NAME
+        }
+
+        that.topDeep = Number(treeData.TOP_NETWORK_DEEP)
+        that.listPeriodNum = treeData.listPeriodNum
+        if (getList) {
+          // that.getListData()
+          that.getChildData(treeData)
+        }
+
+        setTimeout(() => {
+          that.loading = false
+          // that.treeChartShow = true
+        }, 1.5 * 1000)
+      })
+    },
+    getChildData(data, node) {
+      const that = this
+      const userId = data.USER_ID
+      // const that = data
+      // if (that.leaf) {
+      //   return ''
+      // }
+      // if (that.isExpanded) {
+      //   return ''
+      // }
+      if (data.children !== null && data.children.length > 0) {
+        return ''
+      }
+      // that.displayNone = ''
+
+      this.loading = true
+      fetchPlacementNetwork({ id: userId, deep: this.expandDeep, periodNum: this.periodNum }).then(response => {
+        // this.$refs.tree.updateKeyChildren(userId, response.data.allData)
+        this.listPeriodNum = response.data.periodNum
+        // that.displayNone = 'display-none'
+        data.isExpanded = true
+        const allData = response.data.allData
+        // const allData = that.traversalTree(data,that)
+        allData.forEach((item) => {
+          console.log(item)
+          item.name = item.USER_NAME
+          if (item.children && item.children.length > 0) {
+            console.log(item.children)
+            item.children.forEach((child) => {
+              child.name = child.USER_NAME
+            })
+          }
+        })
+        // that.treeData.children = that.traversalTree( allData )
+        console.log(that.traversalTree(allData))
+        that.treeData.children = allData
+
+        that.treeChartShow = true
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+    traversalTree(tree) {
+      const that = this
+      console.log(tree)
+      tree.forEach((item) => {
+        console.log(item)
+        item.name = item.USER_NAME
+        if (item.children && item.children.length > 0) {
+          console.log(item.children)
+          item.children.forEach((child) => {
+            that.traversalTree(child)
+          })
+        }
+      })
+    },
+    getListData(page, pageSize) {
+      this.filterForm.page = page
+      this.filterForm.pageSize = pageSize
+      fetchPlacementNetworkList(this.filterForm).then(response => {
+        this.allData = response.data
+        this.listTopDeep = response.data.listTopDeep
+        // this.treeData.children = response.data.list
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.tree-chart{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/atlas/placement-network.vue

@@ -1,163 +1,163 @@
 <template>
   <div class="app-container">
-		<div class="filter-user" @keyup.enter="getMainData()" style="margin: 5px 0">
-			<el-input v-model="mainUserName" size="small" class="top-member" style="width: 300px; margin-top: 10px;">
-				<template slot="prepend">{{ $t('atlas.topMember') }}</template>
-			</el-input>
-			<el-input v-model="expandDeep" size="small" style="width: 200px; margin-top: 10px;" class="spread-depth">
-				<template slot="prepend">{{ $t('atlas.spreadDepth') }}</template>
-			</el-input>
-			<el-input v-model="periodNum" size="small" style="width: 150px;" v-show="false">
-				<template slot="prepend">{{ $t('atlas.periodNumber') }}</template>
-			</el-input>
-			<el-button type="primary" size="small" @click="getMainData()" style=" margin-top: 10px;">{{ $t('common.confirm') }}</el-button>
-		</div>
-
-		<el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0" default-expand-all :height="tool.getTableHeight(true)" style="margin-top: 15px;">
-			<span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className" slot-scope="{ node, data }">
-				<span :class="'el-icon-loading '+ data.displayNone"></span>
-				<span :class="data.icon"></span>
-				<span>
-					<el-tag type="danger">{{countTopDeep(data.TOP_NETWORK_DEEP, topDeep)}}</el-tag>
-					<el-tag>{{ node.label }}</el-tag>
-					<el-tag>{{data.REAL_NAME}}</el-tag>
-					<el-tag type="danger">{{ $t('atlas.location') }}: {{ data.RELATIVE_LOCATION }}</el-tag>
-					<el-tag type="success">{{ data.DEC_LV_NAME }}</el-tag>
-					<el-tag type="warning">{{ $t('atlas.highest') }}: {{ data.EMP_LV_NAME }}, {{ data.CROWN_LV_NAME }}</el-tag>
-					<el-tag>{{ data.PERIOD_AT }}</el-tag>
-				</span>
-			</span>
-		</el-tree>
+    <div class="filter-user" style="margin: 5px 0" @keyup.enter="getMainData()">
+      <el-input v-model="mainUserName" size="small" class="top-member" style="width: 300px; margin-top: 10px;">
+        <template slot="prepend">{{ $t('atlas.topMember') }}</template>
+      </el-input>
+      <el-input v-model="expandDeep" size="small" style="width: 200px; margin-top: 10px;" class="spread-depth">
+        <template slot="prepend">{{ $t('atlas.spreadDepth') }}</template>
+      </el-input>
+      <el-input v-show="false" v-model="periodNum" size="small" style="width: 150px;">
+        <template slot="prepend">{{ $t('atlas.periodNumber') }}</template>
+      </el-input>
+      <el-button type="primary" size="small" style=" margin-top: 10px;" @click="getMainData()">{{ $t('common.confirm') }}</el-button>
+    </div>
+
+    <el-tree ref="tree" :props="props" :data="treeData" node-key="USER_ID" :indent="0" default-expand-all :height="tool.getTableHeight(true)" style="margin-top: 15px;" @node-click="getChildData">
+      <span :id="'node_'+data.USER_ID" slot-scope="{ node, data }" :class="'custom-tree-node '+data.className">
+        <span :class="'el-icon-loading '+ data.displayNone" />
+        <span :class="data.icon" />
+        <span>
+          <el-tag type="danger">{{ countTopDeep(data.TOP_NETWORK_DEEP, topDeep) }}</el-tag>
+          <el-tag>{{ node.label }}</el-tag>
+          <el-tag>{{ data.REAL_NAME }}</el-tag>
+          <el-tag type="danger">{{ $t('atlas.location') }}: {{ data.RELATIVE_LOCATION }}</el-tag>
+          <el-tag type="success">{{ data.DEC_LV_NAME }}</el-tag>
+          <el-tag type="warning">{{ $t('atlas.highest') }}: {{ data.EMP_LV_NAME }}, {{ data.CROWN_LV_NAME }}</el-tag>
+          <el-tag>{{ data.PERIOD_AT }}</el-tag>
+        </span>
+      </span>
+    </el-tree>
   </div>
 </template>
 
 <script>
-import {fetchMainUserInfo, fetchPlacementNetwork, fetchPlacementNetworkList} from '@/api/atlas'
+import { fetchMainUserInfo, fetchPlacementNetwork, fetchPlacementNetworkList } from '@/api/atlas'
 import Pagination from '@/components/Pagination'
 import waves from '@/directive/waves'
 import tool from '@/utils/tool'
 
 export default {
-  name: 'placementNetwork',
+  name: 'PlacementNetwork',
   components: { Pagination },
   directives: { waves },
   data() {
     return {
-			loading: true,
-			tabActiveName: 'first',
-			props: {
-				label: 'USER_NAME',
-				children: 'children',
-				icon: 'icon',
-			},
-			treeData: null,
-			expandDeep: 5,
-			topDeep: 0,
-			mainUserName: '',
-			periodNum: null,
-			listPeriodNum: null,
-			allData: null,
-			tableHeaders: null,
-			tableData: null,
-			currentPage: 1,
-			totalPages: 1,
-			totalCount: 1,
-			tool: tool,
-			filterForm: {
-				userName: null,
-				deep: 5,
-				periodNum: null,
-				page: 1,
-				pageSize: 20
-			},
-			listTopDeep: 0,
+      loading: true,
+      tabActiveName: 'first',
+      props: {
+        label: 'USER_NAME',
+        children: 'children',
+        icon: 'icon'
+      },
+      treeData: null,
+      expandDeep: 5,
+      topDeep: 0,
+      mainUserName: '',
+      periodNum: null,
+      listPeriodNum: null,
+      allData: null,
+      tableHeaders: null,
+      tableData: null,
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      tool: tool,
+      filterForm: {
+        userName: null,
+        deep: 5,
+        periodNum: null,
+        page: 1,
+        pageSize: 20
+      },
+      listTopDeep: 0
     }
   },
   created() {
-		this.getMainData(null,true)
+    this.getMainData(null, true)
   },
   methods: {
-		getMainData(userName = null, getList = false) {
-			this.$message({
-				message: this.$t('common.awaitData')
-			})
-			let params = {
-				periodNum: this.periodNum
-			}
-			if (this.mainUserName !== null) {
-				params = {userName: this.mainUserName, periodNum: this.periodNum}
-			}
-			this.loading = true
-			fetchMainUserInfo(params).then(response => {
-				this.treeData = response.data
-				this.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
-				this.listPeriodNum = response.data[0].listPeriodNum
-				if (getList) {
-					this.getListData()
-				}
-
-				setTimeout(() => {
-					this.loading = false
-				}, 1.5 * 1000)
-			})
-		},
-		getChildData(data, node) {
-			let userId = data.USER_ID
-			let that = data
-			if (that.leaf) {
-				return ''
-			}
-			if (that.isExpanded) {
-				return ''
-			}
-			if (that.children !== null && that.children.length > 0) {
-				return ''
-			}
-			that.displayNone = ''
-
-			this.loading = true
-			fetchPlacementNetwork({id: userId, deep: this.expandDeep, periodNum: this.periodNum}).then(response => {
-				this.$refs.tree.updateKeyChildren(userId, response.data.allData)
-				this.listPeriodNum = response.data.periodNum
-				that.displayNone = 'display-none'
-				that.isExpanded = true
-
-				setTimeout(() => {
-					this.loading = false
-				}, 1.5 * 1000)
-			})
-		},
-		getListData(page, pageSize) {
-			this.filterForm.page = page
-			this.filterForm.pageSize = pageSize
-			fetchPlacementNetworkList(this.filterForm).then(response => {
-				this.allData = response.data
-				this.listTopDeep = response.data.listTopDeep
+    getMainData(userName = null, getList = false) {
+      this.$message({
+        message: this.$t('common.awaitData')
+      })
+      let params = {
+        periodNum: this.periodNum
+      }
+      if (this.mainUserName !== null) {
+        params = { userName: this.mainUserName, periodNum: this.periodNum }
+      }
+      this.loading = true
+      fetchMainUserInfo(params).then(response => {
+        this.treeData = response.data
+        this.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
+        this.listPeriodNum = response.data[0].listPeriodNum
+        if (getList) {
+          this.getListData()
+        }
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+    getChildData(data, node) {
+      const userId = data.USER_ID
+      const that = data
+      if (that.leaf) {
+        return ''
+      }
+      if (that.isExpanded) {
+        return ''
+      }
+      if (that.children !== null && that.children.length > 0) {
+        return ''
+      }
+      that.displayNone = ''
+
+      this.loading = true
+      fetchPlacementNetwork({ id: userId, deep: this.expandDeep, periodNum: this.periodNum }).then(response => {
+        this.$refs.tree.updateKeyChildren(userId, response.data.allData)
+        this.listPeriodNum = response.data.periodNum
+        that.displayNone = 'display-none'
+        that.isExpanded = true
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+    getListData(page, pageSize) {
+      this.filterForm.page = page
+      this.filterForm.pageSize = pageSize
+      fetchPlacementNetworkList(this.filterForm).then(response => {
+        this.allData = response.data
+        this.listTopDeep = response.data.listTopDeep
 
         setTimeout(() => {
           this.loading = false
         }, 1.5 * 1000)
       })
     },
-		countTopDeep (deep, topDeep) {
-			return Number(deep) - Number(topDeep)
-		},
-		handleCurrentChange (page) {
-			this.getListData(page, this.pageSize)
-		},
-		handleSizeChange (pageSize) {
-			this.getListData(this.currentPage, pageSize)
-		},
-		handleFilter () {
-			this.getListData(1, this.pageSize)
-			this.tabActiveName = 'two'
-		},
-		handleShow (row) {
-			this.loading = true
-			this.filterForm.userName = row.SEE_USER_NAME
-			this.getListData(1, this.pageSize)
-			this.tabActiveName = 'two'
-		},
+    countTopDeep(deep, topDeep) {
+      return Number(deep) - Number(topDeep)
+    },
+    handleCurrentChange(page) {
+      this.getListData(page, this.pageSize)
+    },
+    handleSizeChange(pageSize) {
+      this.getListData(this.currentPage, pageSize)
+    },
+    handleFilter() {
+      this.getListData(1, this.pageSize)
+      this.tabActiveName = 'two'
+    },
+    handleShow(row) {
+      this.loading = true
+      this.filterForm.userName = row.SEE_USER_NAME
+      this.getListData(1, this.pageSize)
+      this.tabActiveName = 'two'
+    }
   }
 }
 </script>

src/views/atlas/sponsor-network-ex.vue

@@ -0,0 +1,28 @@
+
+<template>
+  <div>
+    <TreeChart :tree-data="treeData" @clickNode="getNodeData" />
+  </div>
+</template>
+<script>
+import treeChart from '@/components/TreeChart/index.vue'
+export default {
+  name: 'SponsorNetworkEx',
+  components: {
+    treeChart
+  },
+  data() {
+    return {
+      treeData: {}
+    }
+  },
+  methods: {
+    getNodeData() {
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/atlas/sponsor-network.vue

@@ -1,160 +1,160 @@
 <template>
   <div class="app-container">
-		<div class="filter-user" @keyup.enter="getMainData()" style="margin: 5px 0">
-			<el-input v-model="mainUserName" size="small" style="width:300px; margin-top: 10px;" class="top-member">
-				<template slot="prepend">{{ $t('atlas.topMember') }}</template>
-			</el-input>
-			<el-input v-model="expandDeep" size="small" style="width:200px; margin-top: 10px;" class="spread-depth">
-				<template slot="prepend">{{ $t('atlas.spreadDepth') }}</template>
-			</el-input>
-			<el-input v-model="periodNum" size="small" style="width:150px; margin-top: 10px;" v-show="false">
-				<template slot="prepend">{{ $t('atlas.periodNumber') }}</template>
-			</el-input>
-			<el-button type="primary" size="small" @click="getMainData()" style="margin-top: 10px;">{{ $t('common.confirm') }}</el-button>
-		</div>
-		<el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0" default-expand-all :height="tool.getTableHeight(true)" style="margin-top: 15px;">
-			<span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className" slot-scope="{ node, data }">
-				<span :class="'el-icon-loading '+ data.displayNone"></span>
-				<span :class="data.icon"></span>
-				<span>
-					<el-tag type="danger">{{ node.label }}</el-tag>
-					<el-tag>{{data.REAL_NAME}}</el-tag>
-					<el-tag type="success">{{data.DEC_LV_NAME}}</el-tag>
-					<el-tag type="warning">Highest: {{data.EMP_LV_NAME}}, {{data.CROWN_LV_NAME}}</el-tag>
-					<el-tag>{{data.PERIOD_AT}}</el-tag>
-				</span>
-			</span>
-		</el-tree>
+    <div class="filter-user" style="margin: 5px 0" @keyup.enter="getMainData()">
+      <el-input v-model="mainUserName" size="small" style="width:300px; margin-top: 10px;" class="top-member">
+        <template slot="prepend">{{ $t('atlas.topMember') }}</template>
+      </el-input>
+      <el-input v-model="expandDeep" size="small" style="width:200px; margin-top: 10px;" class="spread-depth">
+        <template slot="prepend">{{ $t('atlas.spreadDepth') }}</template>
+      </el-input>
+      <el-input v-show="false" v-model="periodNum" size="small" style="width:150px; margin-top: 10px;">
+        <template slot="prepend">{{ $t('atlas.periodNumber') }}</template>
+      </el-input>
+      <el-button type="primary" size="small" style="margin-top: 10px;" @click="getMainData()">{{ $t('common.confirm') }}</el-button>
+    </div>
+    <el-tree ref="tree" :props="props" :data="treeData" node-key="USER_ID" :indent="0" default-expand-all :height="tool.getTableHeight(true)" style="margin-top: 15px;" @node-click="getChildData">
+      <span :id="'node_'+data.USER_ID" slot-scope="{ node, data }" :class="'custom-tree-node '+data.className">
+        <span :class="'el-icon-loading '+ data.displayNone" />
+        <span :class="data.icon" />
+        <span>
+          <el-tag type="danger">{{ node.label }}</el-tag>
+          <el-tag>{{ data.REAL_NAME }}</el-tag>
+          <el-tag type="success">{{ data.DEC_LV_NAME }}</el-tag>
+          <el-tag type="warning">Highest: {{ data.EMP_LV_NAME }}, {{ data.CROWN_LV_NAME }}</el-tag>
+          <el-tag>{{ data.PERIOD_AT }}</el-tag>
+        </span>
+      </span>
+    </el-tree>
   </div>
 </template>
 
 <script>
-import {fetchMainUserInfo, fetchSponsorNetwork, fetchSponsorNetworkList} from '@/api/atlas'
+import { fetchMainUserInfo, fetchSponsorNetwork, fetchSponsorNetworkList } from '@/api/atlas'
 import Pagination from '@/components/Pagination'
 import waves from '@/directive/waves'
 import tool from '@/utils/tool'
 
 export default {
-  name: 'sponsorNetwork',
+  name: 'SponsorNetwork',
   components: { Pagination },
   directives: { waves },
   data() {
     return {
-			loading: true,
-			tabActiveName: 'first',
-			props: {
-				label: 'USER_NAME',
-				children: 'children',
-				icon: 'icon',
-			},
-			treeData: null,
-			expandDeep: 5,
-			topDeep: 0,
-			mainUserName: '',
-			periodNum: null,
-			listPeriodNum: null,
-			allData: null,
-			tableHeaders: null,
-			tableData: null,
-			currentPage: 1,
-			totalPages: 1,
-			totalCount: 1,
-			tool: tool,
-			filterForm: {
-				userName: null,
-				deep: 5,
-				periodNum: null,
-				page: 1,
-				pageSize: 20
-			},
-			listTopDeep: 0,
+      loading: true,
+      tabActiveName: 'first',
+      props: {
+        label: 'USER_NAME',
+        children: 'children',
+        icon: 'icon'
+      },
+      treeData: null,
+      expandDeep: 5,
+      topDeep: 0,
+      mainUserName: '',
+      periodNum: null,
+      listPeriodNum: null,
+      allData: null,
+      tableHeaders: null,
+      tableData: null,
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      tool: tool,
+      filterForm: {
+        userName: null,
+        deep: 5,
+        periodNum: null,
+        page: 1,
+        pageSize: 20
+      },
+      listTopDeep: 0
     }
   },
   created() {
-		this.getMainData(null,true)
+    this.getMainData(null, true)
   },
   methods: {
-		getMainData(userName = null, getList = false) {
-			this.$message({
-				message: this.$t('common.awaitData')
-			})
-			let params = {
-				periodNum: this.periodNum
-			}
-			if (this.mainUserName !== null) {
-				params = {userName: this.mainUserName, periodNum: this.periodNum}
-			}
-			this.loading = true
-			fetchMainUserInfo(params).then(response => {
-				this.treeData = response.data
-				this.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
-				this.listPeriodNum = response.data[0].listPeriodNum
-				if (getList) {
-					this.getListData()
-				}
-
-				setTimeout(() => {
-					this.loading = false
-				}, 1.5 * 1000)
-			})
-		},
-		getChildData(data, node) {
-			let userId = data.USER_ID
-			let that = data
-			if (that.leaf) {
-				return ''
-			}
-			if (that.isExpanded) {
-				return ''
-			}
-			if (that.children !== null && that.children.length > 0) {
-				return ''
-			}
-			that.displayNone = ''
-
-			this.loading = true
-			fetchSponsorNetwork({id: userId, deep: this.expandDeep, periodNum: this.periodNum}).then(response => {
-				this.$refs.tree.updateKeyChildren(userId, response.data.allData)
-				this.listPeriodNum = response.data.periodNum
-				that.displayNone = 'display-none'
-				that.isExpanded = true
-
-				setTimeout(() => {
-					this.loading = false
-				}, 1.5 * 1000)
-			})
-		},
-		getListData(page, pageSize) {
-			this.filterForm.page = page
-			this.filterForm.pageSize = pageSize
-			fetchSponsorNetworkList(this.filterForm).then(response => {
-				this.allData = response.data
-				this.listTopDeep = response.data.listTopDeep
+    getMainData(userName = null, getList = false) {
+      this.$message({
+        message: this.$t('common.awaitData')
+      })
+      let params = {
+        periodNum: this.periodNum
+      }
+      if (this.mainUserName !== null) {
+        params = { userName: this.mainUserName, periodNum: this.periodNum }
+      }
+      this.loading = true
+      fetchMainUserInfo(params).then(response => {
+        this.treeData = response.data
+        this.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
+        this.listPeriodNum = response.data[0].listPeriodNum
+        if (getList) {
+          this.getListData()
+        }
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+    getChildData(data, node) {
+      const userId = data.USER_ID
+      const that = data
+      if (that.leaf) {
+        return ''
+      }
+      if (that.isExpanded) {
+        return ''
+      }
+      if (that.children !== null && that.children.length > 0) {
+        return ''
+      }
+      that.displayNone = ''
+
+      this.loading = true
+      fetchSponsorNetwork({ id: userId, deep: this.expandDeep, periodNum: this.periodNum }).then(response => {
+        this.$refs.tree.updateKeyChildren(userId, response.data.allData)
+        this.listPeriodNum = response.data.periodNum
+        that.displayNone = 'display-none'
+        that.isExpanded = true
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+    getListData(page, pageSize) {
+      this.filterForm.page = page
+      this.filterForm.pageSize = pageSize
+      fetchSponsorNetworkList(this.filterForm).then(response => {
+        this.allData = response.data
+        this.listTopDeep = response.data.listTopDeep
 
         setTimeout(() => {
           this.loading = false
         }, 1.5 * 1000)
       })
     },
-		countTopDeep (deep, topDeep) {
-			return Number(deep) - Number(topDeep)
-		},
-		handleCurrentChange (page) {
-			this.getListData(page, this.pageSize)
-		},
-		handleSizeChange (pageSize) {
-			this.getListData(this.currentPage, pageSize)
-		},
-		handleFilter () {
-			this.getListData(1, this.pageSize)
-			this.tabActiveName = 'two'
-		},
-		handleShow (row) {
-			this.loading = true
-			this.filterForm.userName = row.SEE_USER_NAME
-			this.getListData(1, this.pageSize)
-			this.tabActiveName = 'two'
-		},
+    countTopDeep(deep, topDeep) {
+      return Number(deep) - Number(topDeep)
+    },
+    handleCurrentChange(page) {
+      this.getListData(page, this.pageSize)
+    },
+    handleSizeChange(pageSize) {
+      this.getListData(this.currentPage, pageSize)
+    },
+    handleFilter() {
+      this.getListData(1, this.pageSize)
+      this.tabActiveName = 'two'
+    },
+    handleShow(row) {
+      this.loading = true
+      this.filterForm.userName = row.SEE_USER_NAME
+      this.getListData(1, this.pageSize)
+      this.tabActiveName = 'two'
+    }
   }
 }
 </script>

src/views/dashboard/admin/components/BarChart.vue

@@ -1,102 +1,102 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/admin/components/LineChart.vue

@@ -1,135 +1,135 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/admin/components/PieChart.vue

@@ -1,79 +1,79 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/admin/components/RaddarChart.vue

@@ -1,116 +1,116 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 3000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
-          },
-          indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Technology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
-          ]
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
-        },
-        series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
-          },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Technology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

vue.config.js

@@ -14,7 +14,7 @@ const name = defaultSettings.title || 'Member Management System' // page title
 // For example, Mac: sudo npm run
 // You can change the port by the following method:
 // port = 9527 npm run dev OR npm run dev --port = 9527
-const port = process.env.port || process.env.npm_config_port || 9527 // dev port
+const port = process.env.port || process.env.npm_config_port || 9526 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {