From 377043e9c8f053aa570db1d1b3870b0c526985d8 Mon Sep 17 00:00:00 2001
From: gtz217 <535262213@qq.com>
Date: Mon, 22 Nov 2021 19:36:28 +0800
Subject: [PATCH] add chart

---
 src/components/Charts/BarChart.vue     | 153 +++++++++++++++
 src/components/Charts/Keyboard.vue     | 155 ++++++++++++++++
 src/components/Charts/LineChart.vue    | 152 +++++++++++++++
 src/components/Charts/LineMarker.vue   | 227 ++++++++++++++++++++++
 src/components/Charts/MixChart.vue     | 248 +++++++++++++++++++++++++
 src/components/Charts/PieChart.vue     | 127 +++++++++++++
 src/components/Charts/ScatterChart.vue | 186 +++++++++++++++++++
 src/components/Charts/mixins/resize.js |  64 +++++++
 src/utils/index.js                     |  45 +++++
 src/views/energy/electric.vue          |  28 ++-
 10 files changed, 1383 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Charts/BarChart.vue
 create mode 100644 src/components/Charts/Keyboard.vue
 create mode 100644 src/components/Charts/LineChart.vue
 create mode 100644 src/components/Charts/LineMarker.vue
 create mode 100644 src/components/Charts/MixChart.vue
 create mode 100644 src/components/Charts/PieChart.vue
 create mode 100644 src/components/Charts/ScatterChart.vue
 create mode 100644 src/components/Charts/mixins/resize.js

diff --git a/src/components/Charts/BarChart.vue b/src/components/Charts/BarChart.vue
new file mode 100644
index 0000000..8b860ce
--- /dev/null
+++ b/src/components/Charts/BarChart.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="mod-demo-echarts">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div id="J_chartBarBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    data () {
+      return {
+        chartBar: null
+      }
+    },
+    mounted () {
+      this.initChartBar()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartBar) {
+        this.chartBar.resize()
+      }
+    },
+    methods: {
+      // 柱状图
+      initChartBar () {
+        var option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '直接访问',
+              type: 'bar',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+              name: '邮件营销',
+              type: 'bar',
+              stack: '广告',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+              name: '联盟广告',
+              type: 'bar',
+              stack: '广告',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+              name: '视频广告',
+              type: 'bar',
+              stack: '广告',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+              name: '搜索引擎',
+              type: 'bar',
+              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+              markLine: {
+                lineStyle: {
+                  normal: {
+                    type: 'dashed'
+                  }
+                },
+                data: [
+                  [{ type: 'min' }, { type: 'max' }]
+                ]
+              }
+            },
+            {
+              name: '百度',
+              type: 'bar',
+              barWidth: 5,
+              stack: '搜索引擎',
+              data: [620, 732, 701, 734, 1090, 1130, 1120]
+            },
+            {
+              name: '谷歌',
+              type: 'bar',
+              stack: '搜索引擎',
+              data: [120, 132, 101, 134, 290, 230, 220]
+            },
+            {
+              name: '必应',
+              type: 'bar',
+              stack: '搜索引擎',
+              data: [60, 72, 71, 74, 190, 130, 110]
+            },
+            {
+              name: '其他',
+              type: 'bar',
+              stack: '搜索引擎',
+              data: [62, 82, 91, 84, 109, 110, 120]
+            }
+          ]
+        }
+        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
+        this.chartBar.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartBar.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 400px;
+    }
+  }
+</style>
diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
new file mode 100644
index 0000000..e8e95bc
--- /dev/null
+++ b/src/components/Charts/Keyboard.vue
@@ -0,0 +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>
diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
new file mode 100644
index 0000000..3a4e26b
--- /dev/null
+++ b/src/components/Charts/LineChart.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="mod-demo-echarts">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div id="J_chartLineBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="24">
+        <el-card>
+          <div id="J_chartBarBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div id="J_chartPieBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div id="J_chartScatterBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    data () {
+      return {
+        chartLine: null,
+        chartBar: null,
+        chartPie: null,
+        chartScatter: null
+      }
+    },
+    mounted () {
+      this.initChartLine()
+      this.initChartBar()
+      this.initChartPie()
+      this.initChartScatter()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartLine) {
+        this.chartLine.resize()
+      }
+      if (this.chartBar) {
+        this.chartBar.resize()
+      }
+      if (this.chartPie) {
+        this.chartPie.resize()
+      }
+      if (this.chartScatter) {
+        this.chartScatter.resize()
+      }
+    },
+    methods: {
+      // 折线图
+      initChartLine () {
+        var option = {
+          title: {
+            text: '折线图堆叠'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: { }
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: '邮件营销',
+              type: 'line',
+              stack: '总量',
+              data: [ 120, 132, 101, 134, 90, 230, 210 ]
+            },
+            {
+              name: '联盟广告',
+              type: 'line',
+              stack: '总量',
+              data: [ 220, 182, 191, 234, 290, 330, 310 ]
+            },
+            {
+              name: '视频广告',
+              type: 'line',
+              stack: '总量',
+              data: [ 150, 232, 201, 154, 190, 330, 410 ]
+            },
+            {
+              name: '直接访问',
+              type: 'line',
+              stack: '总量',
+              data: [ 320, 332, 301, 334, 390, 330, 320 ]
+            },
+            {
+              name: '搜索引擎',
+              type: 'line',
+              stack: '总量',
+              data: [ 820, 932, 901, 934, 1290, 1330, 1320 ]
+            }
+          ]
+        }
+        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
+        this.chartLine.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartLine.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 400px;
+    }
+  }
+</style>
diff --git a/src/components/Charts/LineMarker.vue b/src/components/Charts/LineMarker.vue
new file mode 100644
index 0000000..6737fa4
--- /dev/null
+++ b/src/components/Charts/LineMarker.vue
@@ -0,0 +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>
diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
new file mode 100644
index 0000000..0173888
--- /dev/null
+++ b/src/components/Charts/MixChart.vue
@@ -0,0 +1,248 @@
+<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'
+    },
+    title: {
+      type: String,
+      default: 'Mix-Chart'
+    },
+    nameData: {
+      type: Array,
+      default: []
+    },
+    dataList: {
+      type: Array,
+      default: []
+    }
+  },
+  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: this.title,
+          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: this.nameData
+        },
+        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>
diff --git a/src/components/Charts/PieChart.vue b/src/components/Charts/PieChart.vue
new file mode 100644
index 0000000..cc359db
--- /dev/null
+++ b/src/components/Charts/PieChart.vue
@@ -0,0 +1,127 @@
+<template>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card>
+          <div id="J_chartPieBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    data () {
+      return {
+        chartPie: null
+      }
+    },
+    mounted () {
+      this.initChartPie()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartPie) {
+        this.chartPie.resize()
+      }
+    },
+    methods: {
+      // 饼状图
+      initChartPie () {
+        var option = {
+          backgroundColor: '#2c343c',
+          title: {
+            text: 'Customized Pie',
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#ccc'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          visualMap: {
+            show: false,
+            min: 80,
+            max: 600,
+            inRange: {
+              colorLightness: [0, 1]
+            }
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '55%',
+              center: ['50%', '50%'],
+              data: [
+                { value: 335, name: '直接访问' },
+                { value: 310, name: '邮件营销' },
+                { value: 274, name: '联盟广告' },
+                { value: 235, name: '视频广告' },
+                { value: 400, name: '搜索引擎' }
+              ].sort(function (a, b) { return a.value - b.value }),
+              roseType: 'radius',
+              label: {
+                normal: {
+                  textStyle: {
+                    color: 'rgba(255, 255, 255, 0.3)'
+                  }
+                }
+              },
+              labelLine: {
+                normal: {
+                  lineStyle: {
+                    color: 'rgba(255, 255, 255, 0.3)'
+                  },
+                  smooth: 0.2,
+                  length: 10,
+                  length2: 20
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: '#c23531',
+                  shadowBlur: 200,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+              animationType: 'scale',
+              animationEasing: 'elasticOut',
+              animationDelay: function (idx) {
+                return Math.random() * 200
+              }
+            }
+          ]
+        }
+        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
+        this.chartPie.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartPie.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 400px;
+    }
+  }
+</style>
diff --git a/src/components/Charts/ScatterChart.vue b/src/components/Charts/ScatterChart.vue
new file mode 100644
index 0000000..b24fbf3
--- /dev/null
+++ b/src/components/Charts/ScatterChart.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="mod-demo-echarts">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card>
+          <div id="J_chartScatterBox" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    data () {
+      return {
+        chartScatter: null
+      }
+    },
+    mounted () {
+      this.initChartScatter()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartScatter) {
+        this.chartScatter.resize()
+      }
+    },
+    methods: {
+      // 散点图
+      initChartScatter () {
+        var option = {
+          backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
+            { offset: 0, color: '#f7f8fa' },
+            { offset: 1, color: '#cdd0d5' }
+          ]),
+          title: {
+            text: '1990 与 2015 年各国家人均寿命与 GDP'
+          },
+          legend: {
+            right: 10,
+            data: ['1990', '2015']
+          },
+          xAxis: {
+            splitLine: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          yAxis: {
+            splitLine: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            },
+            scale: true
+          },
+          series: [
+            {
+              name: '1990',
+              data: [
+                [28604, 77, 17096869, 'Australia', 1990],
+                [31163, 77.4, 27662440, 'Canada', 1990],
+                [1516, 68, 1154605773, 'China', 1990],
+                [13670, 74.7, 10582082, 'Cuba', 1990],
+                [28599, 75, 4986705, 'Finland', 1990],
+                [29476, 77.1, 56943299, 'France', 1990],
+                [31476, 75.4, 78958237, 'Germany', 1990],
+                [28666, 78.1, 254830, 'Iceland', 1990],
+                [1777, 57.7, 870601776, 'India', 1990],
+                [29550, 79.1, 122249285, 'Japan', 1990],
+                [2076, 67.9, 20194354, 'North Korea', 1990],
+                [12087, 72, 42972254, 'South Korea', 1990],
+                [24021, 75.4, 3397534, 'New Zealand', 1990],
+                [43296, 76.8, 4240375, 'Norway', 1990],
+                [10088, 70.8, 38195258, 'Poland', 1990],
+                [19349, 69.6, 147568552, 'Russia', 1990],
+                [10670, 67.3, 53994605, 'Turkey', 1990],
+                [26424, 75.7, 57110117, 'United Kingdom', 1990],
+                [37062, 75.4, 252847810, 'United States', 1990]
+              ],
+              type: 'scatter',
+              symbolSize: function (data) {
+                return Math.sqrt(data[2]) / 5e2
+              },
+              label: {
+                emphasis: {
+                  show: true,
+                  formatter: function (param) {
+                    return param.data[3]
+                  },
+                  position: 'top'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(120, 36, 50, 0.5)',
+                  shadowOffsetY: 5,
+                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                    { offset: 0, color: 'rgb(251, 118, 123)' },
+                    { offset: 1, color: 'rgb(204, 46, 72)' }
+                  ])
+                }
+              }
+            },
+            {
+              name: '2015',
+              data: [
+                [44056, 81.8, 23968973, 'Australia', 2015],
+                [43294, 81.7, 35939927, 'Canada', 2015],
+                [13334, 76.9, 1376048943, 'China', 2015],
+                [21291, 78.5, 11389562, 'Cuba', 2015],
+                [38923, 80.8, 5503457, 'Finland', 2015],
+                [37599, 81.9, 64395345, 'France', 2015],
+                [44053, 81.1, 80688545, 'Germany', 2015],
+                [42182, 82.8, 329425, 'Iceland', 2015],
+                [5903, 66.8, 1311050527, 'India', 2015],
+                [36162, 83.5, 126573481, 'Japan', 2015],
+                [1390, 71.4, 25155317, 'North Korea', 2015],
+                [34644, 80.7, 50293439, 'South Korea', 2015],
+                [34186, 80.6, 4528526, 'New Zealand', 2015],
+                [64304, 81.6, 5210967, 'Norway', 2015],
+                [24787, 77.3, 38611794, 'Poland', 2015],
+                [23038, 73.13, 143456918, 'Russia', 2015],
+                [19360, 76.5, 78665830, 'Turkey', 2015],
+                [38225, 81.4, 64715810, 'United Kingdom', 2015],
+                [53354, 79.1, 321773631, 'United States', 2015]
+              ],
+              type: 'scatter',
+              symbolSize: function (data) {
+                return Math.sqrt(data[2]) / 5e2
+              },
+              label: {
+                emphasis: {
+                  show: true,
+                  formatter: function (param) {
+                    return param.data[3]
+                  },
+                  position: 'top'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(25, 100, 150, 0.5)',
+                  shadowOffsetY: 5,
+                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                    { offset: 0, color: 'rgb(129, 227, 238)' },
+                    { offset: 1, color: 'rgb(25, 183, 207)' }
+                  ])
+                }
+              }
+            }
+          ]
+        }
+        this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
+        this.chartPie.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartPie.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 400px;
+    }
+  }
+</style>
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
new file mode 100644
index 0000000..a037465
--- /dev/null
+++ b/src/components/Charts/mixins/resize.js
@@ -0,0 +1,64 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-11-22 16:15:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-11-22 19:17:01
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\components\Charts\mixins\resize.js
+ */
+import { debounce } from '@/utils'
+
+export default {
+  data () {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted () {
+    this.initListener()
+  },
+  activated () {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy () {
+    this.destroyListener()
+  },
+  deactivated () {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler (e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener () {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener () {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize () {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 024c562..ffaded8 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,3 +1,11 @@
+/*
+ * @Author: gtz
+ * @Date: 2021-11-19 10:10:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-11-22 19:21:31
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\utils\index.js
+ */
 import Vue from 'vue'
 import router from '@/router'
 import store from '@/store'
@@ -19,6 +27,43 @@ export function isAuth (key) {
   return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
 }
 
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce (func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+  return function (...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+    return result
+  }
+}
+
 /**
  * 树形数据转换
  * @param {*} data
diff --git a/src/views/energy/electric.vue b/src/views/energy/electric.vue
index 4e73f0f..87003b4 100644
--- a/src/views/energy/electric.vue
+++ b/src/views/energy/electric.vue
@@ -1,7 +1,31 @@
 <!--
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
- * @LastEditors: zwq
- * @LastEditTime: 2021-11-19 10:55:33
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-11-22 19:36:14
  * @Description:
 -->
+<template>
+  <div class="chart-container">
+    <chart height="100%" width="100%" />
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/Charts/MixChart'
+
+export default {
+  name: 'electric',
+  components: { Chart }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 84px);
+}
+</style>
+
+