vue echarts

安装

npm i -D echarts

使用

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted } from 'vue'

onMounted(() => {
  interface DataItem {
    value: [string, number]
  }

  let myChart = echarts.init(document.getElementById('main'))

  let data: DataItem[] = []

  const randomData = (): DataItem => {
    let now = new Date
    let value = Math.random() * 21 + 100

    return {
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-') +
        ' ' +
        [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),
        Math.round(value)
      ]
    }
  }

  let option: echarts.EChartsOption = {
    tooltip: {
      trigger: 'axis',
      valueFormatter: value => value + ' °C'
    },

    xAxis: {
      name: '时间',
      type: 'time',
      axisLabel: {
        formatter: '{HH}:{mm}'
      }
    },

    yAxis: {
      name: '温度',
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      },
    },

    dataZoom: [
      {
        type: 'inside',
      },
      {
        type: 'slider',
        left: '11%',
        right: '12%',
        labelFormatter: value => {
          const v = new Date(value)
          return [v.getFullYear(), v.getMonth() + 1, v.getDate()].join('-') +
            '\n' +
            [v.getHours(), v.getMinutes(), v.getSeconds()].join(':')
        },
      },
    ],

    series: [
      {
        name: '温度',
        type: 'line',
        showSymbol: false,
        data: data,
      }
    ]
  }

  setInterval(() => {
    data.push(randomData())

    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          data: data
        }
      ]
    })
  }, 2000)

  myChart.setOption(option)
})

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>

  <div id="main" style="width:600px; height:400px;"></div>

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>