diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
index 8bd42bb..2527fd6 100644
--- a/src/router/modules/example.js
+++ b/src/router/modules/example.js
@@ -16,7 +16,13 @@
       path: '/exampleTable',
       name: 'ExampleTable',
       component: () => import('@/views/example/tableExample'),
-      meta: {title: '表格示例', icon: ''}
+      meta: { title: '表格示例', icon: '' }
+    },
+    {
+      path: '/exampleChart',
+      name: 'ExampleChart',
+      component: () => import('@/views/example/chartExample'),
+      meta: { title: '图表示例', icon: '' }
     }
   ]
 }]

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
index 8bd42bb..2527fd6 100644
--- a/src/router/modules/example.js
+++ b/src/router/modules/example.js
@@ -16,7 +16,13 @@
       path: '/exampleTable',
       name: 'ExampleTable',
       component: () => import('@/views/example/tableExample'),
-      meta: {title: '表格示例', icon: ''}
+      meta: { title: '表格示例', icon: '' }
+    },
+    {
+      path: '/exampleChart',
+      name: 'ExampleChart',
+      component: () => import('@/views/example/chartExample'),
+      meta: { title: '图表示例', icon: '' }
     }
   ]
 }]
diff --git a/src/router/modules/moveManagement.js b/src/router/modules/moveManagement.js
index 6317f56..c61e762 100644
--- a/src/router/modules/moveManagement.js
+++ b/src/router/modules/moveManagement.js
@@ -4,7 +4,7 @@
 export const moveManagement = [{
   path: 'moveManagement',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
+  redirect: '/bannerConfig', // 重定向
   name: 'MoveManagement',
   alwaysShow: true,
   meta: {

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
index 8bd42bb..2527fd6 100644
--- a/src/router/modules/example.js
+++ b/src/router/modules/example.js
@@ -16,7 +16,13 @@
       path: '/exampleTable',
       name: 'ExampleTable',
       component: () => import('@/views/example/tableExample'),
-      meta: {title: '表格示例', icon: ''}
+      meta: { title: '表格示例', icon: '' }
+    },
+    {
+      path: '/exampleChart',
+      name: 'ExampleChart',
+      component: () => import('@/views/example/chartExample'),
+      meta: { title: '图表示例', icon: '' }
     }
   ]
 }]
diff --git a/src/router/modules/moveManagement.js b/src/router/modules/moveManagement.js
index 6317f56..c61e762 100644
--- a/src/router/modules/moveManagement.js
+++ b/src/router/modules/moveManagement.js
@@ -4,7 +4,7 @@
 export const moveManagement = [{
   path: 'moveManagement',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
+  redirect: '/bannerConfig', // 重定向
   name: 'MoveManagement',
   alwaysShow: true,
   meta: {
diff --git a/src/utils/index.js b/src/utils/index.js
index 3225d3c..3482122 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -355,3 +355,14 @@
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+/**
+ * 根据rem计算px
+ * @param res
+ * @returns {number}
+ */
+export function countSize(res) {
+  const rem = getRem() // 从cookie中取到rem
+  return res * rem
+}
+

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
index 8bd42bb..2527fd6 100644
--- a/src/router/modules/example.js
+++ b/src/router/modules/example.js
@@ -16,7 +16,13 @@
       path: '/exampleTable',
       name: 'ExampleTable',
       component: () => import('@/views/example/tableExample'),
-      meta: {title: '表格示例', icon: ''}
+      meta: { title: '表格示例', icon: '' }
+    },
+    {
+      path: '/exampleChart',
+      name: 'ExampleChart',
+      component: () => import('@/views/example/chartExample'),
+      meta: { title: '图表示例', icon: '' }
     }
   ]
 }]
diff --git a/src/router/modules/moveManagement.js b/src/router/modules/moveManagement.js
index 6317f56..c61e762 100644
--- a/src/router/modules/moveManagement.js
+++ b/src/router/modules/moveManagement.js
@@ -4,7 +4,7 @@
 export const moveManagement = [{
   path: 'moveManagement',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
+  redirect: '/bannerConfig', // 重定向
   name: 'MoveManagement',
   alwaysShow: true,
   meta: {
diff --git a/src/utils/index.js b/src/utils/index.js
index 3225d3c..3482122 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -355,3 +355,14 @@
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+/**
+ * 根据rem计算px
+ * @param res
+ * @returns {number}
+ */
+export function countSize(res) {
+  const rem = getRem() // 从cookie中取到rem
+  return res * rem
+}
+
diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixins.js
new file mode 100644
index 0000000..a4d25bc
--- /dev/null
+++ b/src/utils/resizeMixins.js
@@ -0,0 +1,32 @@
+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils';
+const resizeChartMethod = '$__resizeChartMethod';
+
+export default {
+  data() {
+    // 在组件内部将图表 init 的引用映射到 chart 属性上
+    return {
+      chart: null,
+    };
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false);
+  },
+  activated() {
+    // 防止 keep-alive 之后图表变形
+    if (this.chart) {
+      this.chart.resize()
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod]);
+  },
+  methods: {
+    // 防抖函数来控制 resize 的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 300),
+  },
+};

diff --git a/package.json b/package.json
index eda1da9..9928fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.8",
     "console": "^0.7.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
new file mode 100644
index 0000000..483b9da
--- /dev/null
+++ b/src/components/echart/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import resizeMixins from '@/utils/resizeMixins'
+
+export default {
+  name: 'Echart',
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler(options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    debugger
+    this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
new file mode 100644
index 0000000..1658675
--- /dev/null
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -0,0 +1,256 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"
+  />
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 渐变折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+import Echart from './../index'
+import { countSize } from '@/utils/index'
+export default {
+  name: 'GradientLineChart',
+  components: { Echart },
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#000fff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#000',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '16'
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              fontSize: '16'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#000',
+            nameTextStyle: {
+              color: '#000',
+              fontSize: 14,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            max: function(value) {
+              return value.max + 2
+            },
+            minIntermal: 1,
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 12
+            }
+          }
+        ],
+        series: []
+      }
+    }
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit(newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = []
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.refreshChart()
+  },
+  methods: {
+    refreshChart() {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        const newSeries = []
+        for (const item of this.seriesData) {
+          const series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: 1
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+                [
+                  {
+                    offset: 0.1,
+                    color: `rgba(${item.color},.6)`
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0,0,0,.0)'
+                  }
+                ]
+              )
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue
new file mode 100644
index 0000000..a365dbb
--- /dev/null
+++ b/src/components/echart/lineChart/simpleLineChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <Echart
+    ref="chart"
+    :options="option"
+    height="100%"
+    width="100%"/>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/19
+   * @Description 简单的折线图
+   * @props 数据格式：{
+   *    id: 'traffic_govern_line_id',
+      width: 0,
+      height: 0,
+      legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+      axisData: [
+        {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+      ]
+    }
+   *
+   */
+
+import { countSize } from '@/utils/utils'
+export default {
+  name: 'SimpleLineChart',
+  props: {
+    unit: { // 单位
+      type: String,
+      default: ''
+    },
+    colors: { // 颜色
+      type: Array,
+      default: () => { return ['#01b4ff', '#0337ff'] }
+    },
+    axisLineColor: { // 轴线颜色
+      type: String,
+      default: '#101d5d'
+    },
+    fontColor: { // 轴线上文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    labelColor: { // 图形上文本标签颜色
+      type: String,
+      default: '#47c8b2'
+    },
+    smooth: {
+      type: Boolean,
+      default: true
+    }, // 平滑
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    xAxisData: { // X轴数据
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data () {
+    return {
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 20,
+          containLabel: true
+        },
+        legend: {
+          orient: 'horizontal',
+          data: [],
+          align: 'left',
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: 'rect',
+          textStyle: {
+            width: '300',
+            color: '#fff',
+            fontSize: 10
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: '13'
+          },
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: '13'
+            }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [],
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor // 轴线的颜色
+              }
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 8
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: 'value',
+            color: '#fff',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 9,
+              verticalAlign: 'middle'
+            },
+            splitLine: {
+              lineStyle: {
+                color: ['#101641'],
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor
+              }
+            },
+            axisLabel: {
+              color: this.fontColor,
+              fontSize: 8
+            }
+          }
+        ],
+
+        series: []
+      }
+    }
+  },
+  watch: {
+    width (newVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    xAxisData (newVal) {
+      this.option.xAxis[0].data = newVal
+      this.refreshEchart()
+    },
+    legend (newVal) {
+      this.option.legend.data = newVal
+      this.refreshEchart()
+    },
+    unit (newVal) {
+      this.option.yAxis[0].name = newVal
+      this.refreshEchart()
+    },
+    seriesData: {
+      handler (newValue) {
+        let newSeries = []
+        for (let item of newValue) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+        this.refreshEchart()
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.unit && (this.option.yAxis[0].name = this.unit)
+    if (this.xAxisData.length) {
+      this.option.legend.data = this.legend
+      this.option.xAxis[0].data = this.xAxisData
+      let newSeries = []
+      for (let item of this.seriesData) {
+        let series = {
+          name: item.name,
+          type: 'line',
+          symbol: 'none', // 去掉折线节点
+          smooth: this.smooth, // 曲线变平滑
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: countSize(0.03)
+          },
+          data: item.data
+        }
+        newSeries.push(series)
+      }
+      this.$set(this.option, 'series', newSeries)
+      this.initEchart()
+    }
+  },
+  methods: {
+    refreshEchart () {
+      this.unit && (this.option.yAxis[0].name = this.unit)
+      if (this.xAxisData.length) {
+        this.option.legend.data = this.legend
+        this.option.xAxis[0].data = this.xAxisData
+        let newSeries = []
+        for (let item of this.seriesData) {
+          let series = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none', // 去掉折线节点
+            smooth: this.smooth, // 曲线变平滑
+            itemStyle: {
+              color: `rgb(${item.color})`
+            },
+            lineStyle: {
+              width: countSize(0.03)
+            },
+            data: item.data
+          }
+          newSeries.push(series)
+        }
+        this.$set(this.option, 'series', newSeries)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json
new file mode 100644
index 0000000..ce81aba
--- /dev/null
+++ b/src/components/echart/theme.json
@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 81edbe6..4d04aea 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -400,8 +400,8 @@
             this.dialogStatus = false
           })
         }
-      }
       })
+    }
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index dec6221..4fd5b5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,9 +24,7 @@
 import VueQuillEditor from 'vue-quill-editor'
 
 import 'quill/dist/quill.core.css'
-
 import 'quill/dist/quill.snow.css'
-
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
@@ -41,6 +39,10 @@
 import { hasPermission } from './utils/permission'
 Vue.prototype.hasPerm = hasPermission
 
+// 引入echart
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 Vue.config.productionTip = false
 
 import axios from 'axios'
diff --git a/src/router/index.js b/src/router/index.js
index b42ae38..d562e12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,6 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
+import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -183,7 +184,6 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
-  // ...exampleRouters,
   // ...systemRouters,
   ...productManagemant,
   ...distributorManagement,
@@ -197,5 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
+  ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/router/modules/distributorManagement.js b/src/router/modules/distributorManagement.js
index 205dc4d..c4da606 100644
--- a/src/router/modules/distributorManagement.js
+++ b/src/router/modules/distributorManagement.js
@@ -2,10 +2,10 @@
 import Layout from '@/layout/Layout'
 
 export const distributorManagement = [{
-  path: 'example',
+  path: '/distributor',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
-  name: 'Example',
+  redirect: '/distributorList', // 重定向
+  name: 'Distributor',
   alwaysShow: true,
   meta: {
     title: '经销商管理',
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
index 8bd42bb..2527fd6 100644
--- a/src/router/modules/example.js
+++ b/src/router/modules/example.js
@@ -16,7 +16,13 @@
       path: '/exampleTable',
       name: 'ExampleTable',
       component: () => import('@/views/example/tableExample'),
-      meta: {title: '表格示例', icon: ''}
+      meta: { title: '表格示例', icon: '' }
+    },
+    {
+      path: '/exampleChart',
+      name: 'ExampleChart',
+      component: () => import('@/views/example/chartExample'),
+      meta: { title: '图表示例', icon: '' }
     }
   ]
 }]
diff --git a/src/router/modules/moveManagement.js b/src/router/modules/moveManagement.js
index 6317f56..c61e762 100644
--- a/src/router/modules/moveManagement.js
+++ b/src/router/modules/moveManagement.js
@@ -4,7 +4,7 @@
 export const moveManagement = [{
   path: 'moveManagement',
   component: Layout,
-  redirect: '/exampleTable', // 重定向
+  redirect: '/bannerConfig', // 重定向
   name: 'MoveManagement',
   alwaysShow: true,
   meta: {
diff --git a/src/utils/index.js b/src/utils/index.js
index 3225d3c..3482122 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -355,3 +355,14 @@
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+/**
+ * 根据rem计算px
+ * @param res
+ * @returns {number}
+ */
+export function countSize(res) {
+  const rem = getRem() // 从cookie中取到rem
+  return res * rem
+}
+
diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixins.js
new file mode 100644
index 0000000..a4d25bc
--- /dev/null
+++ b/src/utils/resizeMixins.js
@@ -0,0 +1,32 @@
+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils';
+const resizeChartMethod = '$__resizeChartMethod';
+
+export default {
+  data() {
+    // 在组件内部将图表 init 的引用映射到 chart 属性上
+    return {
+      chart: null,
+    };
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false);
+  },
+  activated() {
+    // 防止 keep-alive 之后图表变形
+    if (this.chart) {
+      this.chart.resize()
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod]);
+  },
+  methods: {
+    // 防抖函数来控制 resize 的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 300),
+  },
+};
diff --git a/src/views/example/chartExample.vue b/src/views/example/chartExample.vue
new file mode 100644
index 0000000..d427424
--- /dev/null
+++ b/src/views/example/chartExample.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8" style="height: 400px">
+        <gradient-line-chart :x-axis-data="xAxisData" :series-data="seriesData" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import GradientLineChart from '@/components/echart/lineChart/gradientLineChart'
+export default {
+  name: 'ChartExample',
+  components: { GradientLineChart },
+  data() {
+    return {
+      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      seriesData: [
+        { name: '井盖状态监测仪', data: [120, 252, 101, 134, 290, 230, 110], color: '58,55,194' },
+        { name: '液位监测仪', data: [120, 222, 191, 234, 250, 200, 310], color: '109,202,23' },
+        { name: '有害气体', data: [120, 252, 101, 134, 290, 230, 110], color: '0,255,204' },
+        { name: '消防栓', data: [0, 0, 1, 0, 0, 0, 0], color: '255,192,203' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>