lc_tunnel/web/src/view/screen/components/inductanceChart.vue

<template>
  <div
    id="main"
    class="inductanceBox"
  />
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  const option = {
    xAxis: {
      type: 'time', // 使用时间类型的x轴
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      }
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#ffffff']
        }
      }
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>

<style scoped lang="scss">
.inductanceBox{
  width: 400px;
  height: 250px;
  position: absolute;
  top: 0;
}
</style>