Vue3使用Echarts

**注！：**本页面使用的样式是Echarts的--折线图堆叠

first:在项目中安装Echarts

npm install echarts --save

怎么搭建Vue3项目我这里就不过多阐述了，直接上代码

<template>
  <div> 
    <div id="main" style="width: 100%; height: 450px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
//引入onMounted钩子
import { onMounted } from "vue";
// echarts标准格式
const echartInit = () => {
  //获取DOM元素加初始化
  var myChart = echarts.init(document.getElementById("main"));
  // 指定图表的配置项和数据
  var option = {
  //Echarts官方文档中有每个属性的详细用法
    title: {
      text: "数据统计",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    // 数据的来源
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
  //在onMounted函数里使用这个渲染函数，开头已经注册过了
  //注：不要再setup里面直接使用，因为拿不到DOM节点，会报错
onMounted(() => {
  echartInit();
});
</script>

<style lang="scss" scoped>
    // main的样式已经在行内定义过了
</style>

效果展示