vue3+ ts 使用echarts

<template>
      <div ref="myChart" :style="{ width: '600px', height: '600px' }"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Message from "@/components/message/Message.vue";
import { ref } from "vue";
import * as echarts from "echarts";

export default defineComponent({
  name: "home",
  components: {
    Swiper,
    Message,
  },
  data() {
    return {
    };
  },
  setup(){
 const myChart = ref<HTMLElement>();  //也可以用const myChart = ref<any>(); 
    console.log(myChart);
    const myCharts = ref<any>();
    setTimeout(() => {
      // 绘制图表
      myCharts.value = echarts.init(myChart.value!);
      myCharts.value.setOption({
        title: { text: "降水量" },
        tooltip: {},
        xAxis: {
          data: ["6-3", "6-4", "6-5", "6-6", "6-7", "6-8"],
        },
        yAxis: {},
        series: [
          {
            name: "降水量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    }, 10);

    return {
      myChart,
    };
  }
});
</script>

标签：const,myCharts,myChart,ts,vue3,import,ref,echarts
来源： https://www.cnblogs.com/caoxueyang/p/14862967.html