Echarts在vue3中的使用

这只是一个简单的运用

首先安装 npm i echarts

引入需要的东西

import axios from "axios";
import { ref,onMounted  } from "vue";
import * as echarts from 'echarts';

template部分

<template>
  <div class="home">
    <div id="myChart" :style="{ width: '1500px', height: '550px' }"></div>
  </div>
</template>

js部分

onMounted(() => {
//第一句话不用管，他是获取html标签的
      let myChart = echarts.init(document.getElementById("myChart"));
//第二句话请求接口，将成功的数据放到res中
      axios.get("open/mockData/test1").then((res) => {
// 这些数据是接口中的格式问题，跟for循环似的
        let xdata = res.data.xData.map((val) => val);
        let ndata = res.data.yData.map((val) => val);
        myChart.setOption({
//他的话就是商品的名称
          xAxis: {
            data: xdata,
          },
          yAxis: {},
          title: {
            text: "折线测试",
          },
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   data: ["订单量", "用户量", "充值金额", "交易额"],
          // },
          series: [
            {
              name: "订单量",
              type: "line",
              stack: "Total",
              data: ndata,
            }
      
          ],
        });
      });
      // 绘制图表

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
        myChart2.resize();
      };
    });