在Vue中封装Echarts并使用_封装echarts图表,一页面使用案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/112016207

本文介绍了在Vue项目中封装Echarts的原因和步骤，包括按需引入Echarts、组件封装、监听resize事件以实现自适应，以及在实际项目中的应用。通过封装，可以提高代码复用性和管理效率，解决图表的resize问题。文章还提到了使用mixins和element-resize-detector库来完善组件的适应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue中封装Echarts并使用

为什么要封装

如果不封装，每用一次图表，都要重新配置一边option，封装起来方便复用，也方便统一管理。
解决元素以及窗口的resize等问题。
自己动手封装，只需要看一份文档，并且可以使用更多的原生功能。
看完这篇文章你或许觉得自己封装并不难。

效果图以及项目目录

1、效果图

在这里插入图片描述

2、项目目录

在这里插入图片描述

具体封装过程

1、Echarts的安装

npm i echarts --save

2、引入

全部引入
在你使用Echarts的.vue单文件直接使用以下语句引入：

import echarts from 'echarts'

按需引入
图省事可以整个引入，但是Echarts还是不小的，我们大部分只用到了其中的一部分功能，所以我推荐按需引入：

// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

如果你想用某个组件，但是不清楚该组件属于Echarts的哪一个组成部分，这时你可以查阅文档，点进去鼠标往下翻两下就可以简单下面这张图了，里面说的也比较清楚：
在这里插入图片描述

3、封装案例

此处以堆叠柱状图为例：BarChart.vue

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import chartResize from './mixins/chart-resize'

export default {
   
  mixins:[chartResize],
  props: {
   
    className: {
   
      type: String,
      default: 'chart'
    },
    width: {
   
      type: String,
      default: '100%'
    },
    height: {
   
      type: String,
      default: '350px'
    },
    // 父组件传递过来的图表数据
    chartData: {
   
      type: Object,
      required: true
    }
  },
  data() {
   
    return {
   
      // Echarts实例
      chart: null
    }
  },
  watch: {
   
    /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    chartData: {
   
      deep: true,
      handler(val) {
   
        this.