vue3使用echarts图表

<template>
  <div
    id="myChart123"
    :style="{ width: '700px', height: '300px' }"
    style="margin-left: -100px"
  ></div>
</template>

<script>
export default {
  name: "MyComponent",
};
</script>
<script setup>
import * as echarts from "echarts";
import { ref, reactive, toRefs, onMounted } from "vue";
const data = [
  ["2000-06-05", 116],
  ["2000-06-06", 129],
  ["2000-06-07", 135],
  ["2000-06-08", 86],
  ["2000-06-09", 73],
  ["2000-06-10", 85],
  ["2000-06-11", 73],
  ["2000-06-12", 68],
  ["2000-06-13", 92],
  ["2000-06-14", 130],
  ["2000-06-15", 245],
  ["2000-06-16", 139],
  ["2000-06-17", 115],
  ["2000-06-18", 111],
  ["2000-06-19", 309],
  ["2000-06-20", 206],
  ["2000-06-21", 137],
  ["2000-06-22", 128],
  ["2000-06-23", 85],
  ["2000-06-24", 94],
  ["2000-06-25", 71],
  ["2000-06-26", 106],
  ["2000-06-27", 84],
  ["2000-06-28", 93],
  ["2000-06-29", 85],
  ["2000-06-30", 73],
  ["2000-07-01", 83],
  ["2000-07-02", 125],
  ["2000-07-03", 107],
  ["2000-07-04", 82],
  ["2000-07-05", 44],
  ["2000-07-06", 72],
  ["2000-07-07", 106],
  ["2000-07-08", 107],
  ["2000-07-09", 66],
  ["2000-07-10", 91],
  ["2000-07-11", 92],
  ["2000-07-12", 113],
  ["2000-07-13", 107],
  ["2000-07-14", 131],
  ["2000-07-15", 111],
  ["2000-07-16", 64],
  ["2000-07-17", 69],
  ["2000-07-18", 88],
  ["2000-07-19", 77],
  ["2000-07-20", 83],
  ["2000-07-21", 111],
  ["2000-07-22", 57],
  ["2000-07-23", 55],
  ["2000-07-24", 60],
];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  let myChart = echarts.init(document.getElementById("myChart123"));
  // 绘制图表
  myChart.setOption({
    title: [
      {
        top: "5%",
        left: "center",
        text: "车流量走势图",
        textStyle: {
          //文字颜色
          color: "#67b3fe",
          fontWeight: "bold",
          fontSize: 18,
        },
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: [
        "那曲市",
        "日喀则市",
        "阿里地区",
        "拉萨市",
        "山南市",
        "林芝市",
        "昌都市",
      ],
      axisLabel: {
        textStyle: {
          color: function (value, index) {
            return "#fff";
          },
          fontSize: 14,
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        textStyle: {
          color: function (value, index) {
            return "#fff";
          },
          fontSize: 14,
        },
      },
    },
    series: [
      {
        data: [2820, 3932, 2901, 1934, 4290, 2330, 3320],
        type: "line",
        smooth: true,
      },
    ],
  });
  // window.onresize = function () {
  //   // 自适应大小
  //   myChart.resize();
  // };
});
</script>
<style scoped lang="scss">
#myChart123 {
  transform: translateY(-20px);
}
</style>

最重要的一点：一定要引入 echarts

import * as echarts from "echarts";