vue3+vite 使用echarts

在进行后台系统代码开发的时候，前端绕不开一个常用的插件，就是echarts,在这里整理了一下无脑使用的方式，所有代码都在下面有粘贴
封装的echarts.js有过度引入，在文中通过1.2.3标记了出来，可以选择自己喜欢的方式引入；
1.安装echarts

npm install echarts --save

2.在main.ts引入echarts

import { createApp } from "vue";
// import "./style.css";
import App from "./App.vue";
import echarts from "./utils/echarts";//1.全局引入
const app = createApp(App)
app.config.globalProperties.$echarts = echarts

3.在App.vue中引入echarts

import * as echarts from "echarts";//2.全局引入
import { provide } from "vue";
//provide("echarts", echarts);

4.新建一个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;

5.在用到的地方直接使用

<template>
    <div class="main">
        <div id="box" ref="box"></div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';//3.当前页面引入
// import { getReportsList } from '../../api/user.js'
let box = ref(null)
onMounted(async()=>{
   let myecharts = echarts.init(box.value);
   let option = {
        title: {
            text: '数据报表'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        //类型分类
        legend: {
            data: ['用户1', '用户2', '用户3', '用户4', '用户5']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        //坐标
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true//如果坐标图上xy轴显示的有标示，一定要为true，否则展示不全，内容会被隔挡
        },
        //X轴的命名
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            //bar--柱状图
            //line -- 线图
            {
                name: '用户1',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '用户2',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [240, 182, 291, 234, 290, 330, 310]
            },
            {
                name: '用户3',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 232, 2101, 154, 190, 330, 410]
            },
            {
                name: '用户4',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [360, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '用户5',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
     //请求统计数据，从后端请求的数据
    // let res = await getReportsList();
    // console.log(res)
    
    // option.legend = res.data.data.legend;  //数据的类型分类（命名）
    // option.series = res.data.data.series;  //数据
    // option.xAxis  = res.data.data.xAxis;   //x轴的种类
    // option.yAxis = res.data.data.yAxis;
   
    myecharts.setOption(option)
    window.onresize = function(){
        console.log('窗口大小发生改变了')
        // echarts适配
        myecharts.resize();
 
    }
})

</script>
<style scoped>
#box {
    width: 100%;
    height: 400px;
}
.main{
   
    padding: 10px;

    border-radius: 5px;
    height: 500px;
    margin-top: 10px;
}
</style>