vue3.0普通可视化

<template>
  <div class='loginbody ambient-noise wrap'>
    sded
    <div style='height: 500px width300px' id='main'></div>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  components: {},
  setup () {
    onMounted(() => {
      type EChartsOption = echarts.EChartsOption

      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom as HTMLElement)
      var option: EChartsOption

      interface DataItem {
        name: string
        value: [string, number]
      }

      function randomData (): DataItem {
        now = new Date(+now + oneDay)
        value = value + Math.random() * 21 - 10
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
          ]
        }
      }

      const data: DataItem[] = []
      let now = new Date(1997, 9, 3)
      const oneDay = 24 * 3600 * 1000
      let value = Math.random() * 1000
      for (var i = 0; i < 1000; i++) {
        data.push(randomData())
      }

      option = {
        title: {
          text: 'Dynamic Data & Time Axis'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params: any) {
            params = params[0]
            var date = new Date(params.name)
            return (
              date.getDate() +
              '/' +
              (date.getMonth() + 1) +
              '/' +
              date.getFullYear() +
              ' : ' +
              params.value[1]
            )
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ]
      }

      setInterval(function () {
        for (var i = 0; i < 5; i++) {
          data.shift()
          data.push(randomData())
        }

        myChart.setOption<echarts.EChartsOption>({
          series: [
            {
              data: data
            }
          ]
        })
      }, 1000)
      myChart.setOption(option)
    })
    return {}
  }
})
</script>
<style lang='less' scoped>
.ambient-noise {
  width: calc(100% - 66%);
  .echart {
    height: calc(100% - 100px);
  }
}
</style>