在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.