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

这篇文章主要讲解如何将Echarts封装到Vue组件中提供的封装只是一种大概的思路，实际项目中，可能会与这里出现偏差。不过方法都是一样的，可以对照着做一些更改！

---

作者分享

为什么需要封装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]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
  }

3. 创建图表展示组件(componemts/xxxChart.vue)

• 引入封装好的chart组件和配置项
• 在template中加载图表，注意配置项是一个函数，需要（）调用一下
• 在App.vue引入这个展示组件

<template>
<div>
  <Chart :options="LineChartOption()"/>
</div>
</template>
<!-- 新建一个组件， 在App.vue引入它-->
<script setup>
import Chart from './Charts.vue'
// 引入chart封装好的文件
import LineChartOption  from'./charts/lineOptions'
// 引入配置项
</script>
<style scoped>

</style>

4.App.vue

给展示图表的容器设置宽高背景对齐等样式=>css部分

<template>
  <div class="wrapper">
    <lineChart class="chart"/>
  </div>
</template>
<script setup>
import lineChart from './components/lineChart.vue'
// 引入组件
</script>
<style scoped>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background:hsl(210deg,20%,10%)
}
.wrapper{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}
.wrapper .chart{
  width: 50%;
  height: 70%;
}
</style>

这样图表就加载完成了

这样只需要设置不同的配置项和不同图表的组件就可以了

总结

这里面提供的封装只是一种大概的思路，实际项目中，可能会与这里出现偏差。不过方法都是一样的，可以对照着做一些更改！

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见