vue cli3 改造完成

src/components/Echarts/Line3D.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      const data = []
+      for (let t = 0; t < 25; t += 0.001) {
+        const x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)
+        const y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)
+        const z = t + 2.0 * Math.sin(75 * t)
+        data.push([x, y, z])
+      }
+      this.chart.setOption({
+        tooltip: {},
+        backgroundColor: '#fff',
+        visualMap: {
+          show: false,
+          dimension: 2,
+          min: 0,
+          max: 30,
+          inRange: {
+            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+          }
+        },
+        xAxis3D: {
+          type: 'value'
+        },
+        yAxis3D: {
+          type: 'value'
+        },
+        zAxis3D: {
+          type: 'value'
+        },
+        grid3D: {
+          viewControl: {
+            projection: 'orthographic'
+          }
+        },
+        series: [{
+          type: 'line3D',
+          data: data,
+          lineStyle: {
+            width: 4
+          }
+        }]
+      })
+    }
+  }
+}
+</script>