echarts简单配置

<template>
<div id="chart" :style="{ width: '600px', height: '600px' }"></div>
</template>
<script setup lang="ts">
  import { onMounted } from 'vue';
  import { EChartsOption, init } from 'echarts';
  // echarts在mounted时初始化,卸载mounted里面
  onMounted(() => {
    // 获取dom，断言HTMLElement类型，否则会报错
    const chartEle: HTMLElement = document.querySelector('#chart') as HTMLElement; //获取dom
    const chart = init(chartEle); //初始化echarts
    const option: EChartsOption = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    }; // 配置项
    option && chart.setOption(option); // 设置配置项
  });
</script>
<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  #chart {
    width: 600px;
    height: 400px;
  }
</style>