vue3+ts使用echarts

1，安装echarts

npm install echarts --save  //我自己用这个指令时安装到中间就卡住，所以用的cnpm
cnpm install echarts --save  //cnpm安装指令，用之前先切换淘宝镜像
npm config set registry http://registry.npm.taobao.org/            //切换淘宝镜像

<template>
  <div ref="myChart" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script lang="ts">
import { ref } from "vue";
import * as echarts from "echarts";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default {
  name: "Home",
  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: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    }, 10);

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

上述代码完全可以跑起来，可直接复制运行，先跑起来再根据自己项目定制，使用中一定要记住抛出抛出抛出，return出来，另外就是获取元素了，这是ts的获取语法，不用ts的话按照官网的方法获即可，有问题欢迎留言，作者会及时回答的，前端渣渣，共同进步。