vue3中按需引入ECharts

1.安装

npm install echarts --save

2.新建 echarts.js文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
// 导出
export default echarts;

3.将创建好的 echarts.js文件引入全局main.js中

import { createApp } from "vue";
import App from "./App.vue";

// 引入echarts
import echarts from "@/utils/echarts";

const app = createApp(App);

app.config.globalProperties.$echarts = echarts; //vue3的挂载方式

app.mount("#app");

4.在页面中使用

<template>
  <div>
    <div class="bg-white mb-7 p-12">
      <div class="w-full h-[390px] flex justify-center items-center" ref="echartsRef1">            
       </div>
    </div>
    <div class="bg-white mb-7 p-12">
      <div class="w-full h-[390px] flex justify-center items-center" ref="echartsRef2"> 
       </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
//引入echarts 
import * as echarts from "echarts";
//柱状图
const echartsRef1 = ref(null);
function changeBar1() {
  const chart = echarts.init(echartsRef1.value);
  const option = {
    //鼠标悬浮框
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    //x轴
    xAxis: {
      type: "category",
      data: ["19年秋冬", "20年春夏", "20年秋冬", "21年春夏", "21年秋冬", "22年春夏", "22年秋冬", "23年春夏", "23年秋冬", "24年春夏"],
    },
    //y轴
    yAxis: {
      type: "value",
       //不显示y轴线条
      axisLine: {
        show: false,
      },
       //不显示y轴文字
      axisLabel: {
        show: false,
      },
       //设置y轴分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e6e6e6",
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: [914, 975, 696, 400, 582, 541, 370, 1692, 682, 11],
        type: "bar",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top",
          color: "#0fc9ff",
        },
        barWidth: "40%",
        itemStyle: {
          color: {
            type: "linear",
            x: 0, // 若将此值设为1，表示从右到左渐变
            y: 1, // 若将此值设为1，表示从上到下渐变
            x2: 0, // 左
            y2: 0, // 上
            colorStops: [
              {
                offset: 0,
                color: "#fff", // 0% 处的颜色
              },
              {
                offset: 0.9,
                color: "#0fc9ff", // 90% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
  // 监听窗口大小变化事件
  window.addEventListener("resize", function () {
    // 调用 resize 方法重新渲染图表
    chart.setOption(option);
    chart.resize({});
  });
  chart.setOption(option);
}
//折线图
const echartsRef2 = ref(null);
function changeBar2() {
  const chart = echarts.init(echartsRef2.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["考试通过人数", "测试参与人数", "考试参与人数"],
      right: 10,
    },

    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["19年秋冬", "20年春夏", "20年秋冬", "21年春夏", "21年秋冬", "22年春夏", "22年秋冬", "23年春夏", "23年秋冬", "24年春夏"],
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#e6e6e6",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "考试通过人数",
        type: "line",
        label: {
          show: true,
          position: "top",
          color: "#32d0ee",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#32d0ee",
            lineStyle: {
              color: "#32d0ee",
              width: 2,
            },
            areaStyle: {
              color: "#9dd2fb",
            },
          },
        },
        data: [700, 360, 450, 250, 485, 400, 150, 628, 350, 0],
        markPoint: {
          symbol: "triangle", // 设置拐点小圆点
        },
        symbolSize: 8, // 设置拐点小圆点大小
      },
      {
        name: "测试参与人数",
        type: "line",
        label: {
          show: true,
          position: "top",
          color: "#3467ff",
        },
        areaStyle: {},
        itemStyle: {
          normal: {
            color: "#3467ff",
            lineStyle: {
              color: "#3467ff",
              width: 2,
            },
            areaStyle: {
              color: "#c1d3ff",
            },
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [780, 611, 458, 286, 492, 402, 155, 911, 350, 0],
      },
      {
        name: "考试参与人数",
        type: "line",
        label: {
          show: true,
          position: "top",
          color: "#3283ff",
        },
        areaStyle: {},
        itemStyle: {
          normal: {
            color: "#3283ff",
            lineStyle: {
              color: "#3283ff",
              width: 2,
            },
            areaStyle: {
              color: "#eaf2ff",
            },
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [783, 959, 670, 286, 495, 401, 155, 1679, 662, 10],
      },
    ],
  };
  // 监听窗口大小变化事件
  window.addEventListener("resize", function () {
    // 调用 resize 方法重新渲染图表
    chart.setOption(option);
    chart.resize({});
  });
  chart.setOption(option);
}
onMounted(() => {
  changeBar1();
  changeBar2();
});
</script>
<style lang="scss" scoped></style>

注：案例中使用tailwindcss编写样式，若编译报错请自行修改样式。 

5.实现效果