vue项目中封装echarts比较优雅的方式_echarts封装

• 开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余
• 在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作
• 

优点

• 方便复用
• 项目里需要用到的图表会有多个，实现少代码自动化导入，不需要一个个import
• 展示类的图表，数据与业务、样式分离，只传数据就行
• 图表可配置
• 本人图表用在大屏数据可视化的情况比较多，采用的是等比缩放的方式，所以图表也能根据界面缩放自动缩放，不需要手动调用

一、使用Vite创建Vue项目

1. 创建项目

接下啦就开始我们的学习吧！
1.首先创建一个文件夹，进入终端，一定要安装node ，查看我们的node版本

node -v

2.进入vite官网
☞Vite官方中文文档地址

点击开始就可以进入文档了

使用npm+vite

npm create vite@latest

使用yarn+vite

$ yarn create vite

2. 安装echarts

//npm 方式
 npm i echarts

二、创建echarts封装组件页面

1. 创建component/Charts.vue

<template>
  <div class="container" ref="container"></div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import \* as echarts from 'echarts'
// 1.引入echarts
const container = ref(null);
const chart=ref(null)
// echarts实例保存在ref中


const props=defineProps({
 options:{
 // options是一个必须的属性
 required:true,
 type:Object,
 // 类型为对象
 default:{},
 // 默认值是空的对象
 }
})
// 4.这个时候chart组件虽然可以使用了，但是当options变化的时候图表不会刷新,我们这里可以watch对options进行监听，当options发生变化时，调用echarts.setoption更新配置，不过在watch不能访问onMounted中的echarts实例，这时候我们可以把echarts实例也保存ref中
onMounted(()=>{
 chart.value=echarts.init(container.value,"dark")
 chart.value.setOption(props.options);
 // dark深色主题
 // 2.定义一个ref来保存dom元素，ref中保存的元素到dom加载完成之后才会有值,所以需要在onMonMounted声明周期中获取它,因为这是dom已经加载完成了，获取到元素之后就可以以使用echarts.init进行初始化了，初始化之后会返回echarts实例
 // chart.setOption(props.options
 // )

 // 3.接着让Chart组件接受一个options属性，用于接收图表配置，在echarts初始化完成之后，把配置传给echarts实例
})

const{ options}= props
watch(options,(newOptions)=>{
 chart.value.setOption(newOptions)
},{
 deep:true
})
//5.watch中的代码很简单，就是调用echarts.setOption，把新的options的值传递进入就行了，watch第一个参数可以是一个ref，我们把options转成ref传递给它，第二个参数是处理函数，第二个参数接收俩个参数，分别是监听属性新变化的值和之前的值，我们把 新变化的值传递给echarts，这样就可以重新挥着图表了，第三个参数为是否深度对比，对于配置项这种嵌套比较多的对象需要设置爱喂喂喂true
</script>
<style scoped>
.container{
 width: 100%;
 height: 100%;
}
/\* css部分，给容器设置宽高为100% ，具体真水的宽高，让使用它的组件来设置，这里需要注意echarts要求必须使用宽高才能正常的绘制\*/
</style>

1. Charts作为基础组件，加载并初始化echarts的东西，并根据配置的变化更新图表
2. 在vue中获取dom元素需要使用template.ref’，在vue3中template.ref和响应ref合为了一体
3. 定义一个ref来保存dom元素，ref中保存的元素到dom加载完成之后才会有值,所以需要在onMonMounted声明周期中获取它,因为这是dom已经加载完成了，获取到元素之后就可以以使用echarts.init进行初始化了，初始化之后会返回echarts实例
4. 接着让Chart组件接受一个options属性，用于接收图表配置，在echarts初始化完成之后，把配置传给echarts实例
5. options是一个必须的属性,类型为对象 默认值是空的对象
6. 这个时候chart组件虽然可以使用了，但是当options变化的时候图表不会刷新,我们这里可以watch对options进行监听，当options发生变化时，调用echarts.setoption更新配置，不过在watch不能访问onMounted中的echarts实例，这时候我们可以把echarts实例也保存ref中
7. watch中的代码很简单，就是调用echarts.setOption，把新的options的值传递进入就行了，watch第一个参数可以是一个ref，我们把options转成ref传递给它，第二个参数是处理函数，第二个参数接收俩个参数，分别是监听属性新变化的值和之前的值，我们把 新变化的值传递给echarts，这样就可以重新挥着图表了，第三个参数为是否深度对比，对于配置项这种嵌套比较多的对象需要设置爱喂喂喂true
8. css部分，给容器设置宽高为100% ，具体真水的宽高，让使用它的组件来设置，这里需要注意echarts要求必须使用宽高才能正常的绘制
   存放数据

2. 创建图表配置文件(src/charts/xxxxOptions.js)

在src新建一个chars文件夹存放图表数据，在下方可以放一些柱状图折线图的配置js文件
**注意：**配置可以导出一个函数，以后可以传递参数和自定义的配置项
图表配置=>echarts官网找到

// 图表配置=>echarts官网找到
// 我们这里可以导出一个函数，以后可以通过传递参数和自定义的配置项
export default function LineChartOption(){
  return{
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {


**对象篇**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWIxMTdmNzMyNDJlZjAyMDM?x-oss-process=image/format,png)

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWU5ZGY5NGRhODZhZGZjNjY?x-oss-process=image/format,png)

**模块化编程-自研模块加载器**



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0