在vue3.2中如何使用Echarts，按需导入（使用setup语法糖）

日期：2022-10-20

我使用的是vue3.2版本，咱们废话不多说，直接开始，可以直接复制粘贴

1. 安装Echarts

npm install echarts --save

2. 创建一个js文件，我的文件顺序：src/echarts/index.js

import * as echarts from "echarts/core";

// 引入折线图、饼状图、柱状图
import { LineChart, PieChart, BarChart } from "echarts/charts";

// 引入提示框、标题、直角坐标系、数据集、内置数据转换器组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

echarts.use([LineChart, PieChart, BarChart,TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LegendComponent,LabelLayout,UniversalTransition]);

export default echarts;

3. 在main.js中导入

// 导入入口文件
import echarts from "@/echarts"
// 全局挂载
app.provide("$echarts", echarts);

4. 然后直接在使用的地方引入使用

<template>
    <!-- 创建一个盒子用于承载echarts -->
  <div class="home-chart" ref="homeline"></div>
</template>

<script setup>
    // 引入以下用到的vue函数
import { reactive, inject, onMounted, ref } from "vue";
// 导入echarts的初始化方法
import { init } from "echarts";

// 使用vue的refs声明dom节点
const homeline = ref(null);
// 导入全局挂载的echarts
const echarts = inject("$echarts");

const state = reactive({});

// 初始化echarts的函数
const lieCahrts = () => {
    // 声明别名
    let myChart = echarts.init(goodsLine.value);
    // 配置（这里配置可以根据自己的需要配置，也可以直接复制官网的示例）
    let option = {}

    // 直接挂载
    option && myChart.setOption(option);
}

</script>

<style lang="less" scoped>
    .home-chart{
        width: 100%;
        height: 100%;
    }
</style>

5. 这样就大功告成了