add chart components

src/components/Charts/FFtLine.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,minWidth:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    title: {
+      type: String,
+      default: 'line'
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          xAxis: [],
+          series: []
+        }
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss'
+    },
+    step: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    lineData: function(val) {
+      this.updateChart(val)
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    updateChart(data) {
+      this.chart.setOption({
+        xAxis: {
+          data: data.xAxis
+        },
+        series: [{
+          type: 'line',
+          data: data.series
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      let config = {
+        tooltip: {
+          show: true
+        },
+        xAxis: {
+          name: '频率',
+          type: 'category',
+          data: this.lineData.xAxis
+        },
+        yAxis: {
+          name: '幅度',
+          type: 'value'
+        },
+        series: [{
+          type: 'line',
+          showAllSymbol: 'auto',
+          data: this.lineData.series
+        }]
+      }
+      config = {
+        ...config,
+        ...this.config
+      }
+
+      this.chart.setOption(config)
+    }
+  }
+}
+</script>

src/components/Charts/FunctionLine.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,minWidth:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    title: {
+      type: String,
+      default: 'line'
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    lineData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss'
+    },
+    step: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    lineData: function(val) {
+      this.updateChart(val)
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    updateChart(data) {
+      console.log(data)
+      const xAxis = []
+      const series = []
+      data.forEach(v => {
+        xAxis.push(v[0])
+        series.push(v[1])
+      })
+      this.chart.setOption({
+        xAxis: {
+          data: xAxis
+        },
+        series: [{
+          type: 'line',
+          showSymbol: false,
+          clip: true,
+          data: series
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      let config = {
+        tooltip: {},
+        xAxis: {
+          name: 'x',
+          minorTick: {
+            show: true
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#999'
+            }
+          },
+          minorSplitLine: {
+            show: true,
+            lineStyle: {
+              color: '#ddd'
+            }
+          }
+        },
+        yAxis: {
+          name: 'y',
+          minorTick: {
+            show: true
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#999'
+            }
+          },
+          minorSplitLine: {
+            show: true,
+            lineStyle: {
+              color: '#ddd'
+            }
+          }
+        },
+        series: [{
+          type: 'line',
+          showSymbol: false,
+          clip: true,
+          data: this.lineData
+        }]
+      }
+      config = {
+        ...config,
+        ...this.config
+      }
+
+      this.chart.setOption(config)
+    }
+  }
+}
+</script>

src/components/Charts/TimeDomainLine.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,minWidth:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    title: {
+      type: String,
+      default: 'line'
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          xAxis: [],
+          series: []
+        }
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss'
+    },
+    step: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    lineData: function(val) {
+      this.updateChart(val)
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    updateChart(data) {
+      this.chart.setOption({
+        xAxis: {
+          data: data.xAxis
+        },
+        series: [{
+          type: 'line',
+          showSymbol: false,
+          clip: true,
+          data: data.series.map(v => this.strip(v))
+        }]
+      })
+    },
+    strip(num, precision = 12) {
+      return +parseFloat(num.toPrecision(precision))
+    },
+    initChart() {
+      function strip(num, precision = 12) {
+        return +parseFloat(num.toPrecision(precision))
+      }
+      const lineData = {
+        xAxis: [],
+        series: []
+      }
+      for (let i = 0; i < 1; i += 0.001) {
+        const number = strip(i)
+        lineData.xAxis.push(number)
+        lineData.series.push(Math.sin(2 * Math.PI * number))
+      }
+      this.chart = echarts.init(document.getElementById(this.id))
+      let config = {
+        tooltip: {},
+        xAxis: {
+          data: []
+        },
+        yAxis: {},
+        series: [{
+          type: 'line',
+          data: []
+        }]
+      }
+      config = {
+        ...config,
+        ...this.config
+      }
+
+      this.chart.setOption(config)
+    }
+  }
+}
+</script>