【Vue插件】Vue中封装Echarts插件

echarts插件封装

百度的echarts裤并没有在vue中封装插件，我们在项目中使用 echarts时，在组件中去引用，从而导致我们的项目不好管理，特别是echarts用的多的情况下，整个项目不好维护，止于此，我们可以考虑将echarts封装成一个插件，从而方便管理，话不多说，上干货。

众所周知，Vue.use(XXX)中，XXX代表插件名，这个方法表示中代表插件中必须要实现一个install方法

1.安装

npm install echarts@4.X -S复制

2.使用

2.1 第一种方式：组件内使用

组件的方式是需要在用到的组件中引入整个echarts裤，优点是方便直接，缺点也很明显，用到的地方多了会使得整个项目变的臃肿

<template>
  <!-- 需要设置改div的宽度和长度才能显示 -->
  <div id="main" style="width: 1200px; height: 500px"></div>
</template>
 
<script>
// 第一种方式：哪个组件需要就在哪个组件引入
import echarts from "echarts";
export default {
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
 
<style>
</style>复制

2.2 第二种方式：在原型对象上挂载

在原型对象上挂载的方式是比较省空间的，但这样每个组件都可以去修改这个原型对象，这样会导致系统不稳定，可能会出现某些未知的错误，鉴于此，请看第三种方式

在main.js中：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts复制

组件中使用：

<template>
  <!-- 需要设置改div的宽度和长度才能显示 -->
  <div id="main" style="width: 1200px; height: 500px"></div>
</template>
 
<script>
export default {
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 在组件中直接使用this.$echarts来进行操作
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
 
<style>
</style>复制

2.3 第三种方式：将echarts封装成plugins

将echart封装成plugins插件后，我们只需要传参调用就可以使用echarts，整个项目的图表方便管理。也不会那么臃肿,封装Vue插件的方法就是需要导出一个install(Vue,options)的方法，该原理主要是利用Object.defineProperties给Vue.prototype添加属性，这样的话，可以避免第二种方式中，某些情况会修改Vue原型中的对象。

2.3.1 新建plugins/EchartsPlugin.js文件

import Vue from "vue";
import echarts from "echarts";
const install = function (Vue, options) {
  // 给Vue中的prototype添加属性
  Object.defineProperties(Vue.prototype, {
    $mychart: {
      get() {
        return {
          // 定义折线图,我们可以先传一个ID，在项目开发中可以传入options参数
          line(id) {
            var myChart = echarts.init(document.getElementById(id));
            // 指定图表的配置项和数据
            var option = {
              title: {
                text: "ECharts 入门示例",
              },
              tooltip: {},
              legend: {
                data: ["销量"],
              },
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
              },
              yAxis: {},
              series: [
                {
                  name: "销量",
                  type: "line",
                  data: [5, 20, 36, 10, 10, 20],
                },
              ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          },
        };
      },
    },
  });
};
 
export default install;
 复制

2.3.2 在main.js中执行

import EchartsPlugin from '@/plugins/EchartsPlugin'
// 调用EcahrtsPlugin中的install方法
Vue.use(EchartsPlugin);复制

2.3.4 组件中使用（可根据实际情况传参）

<template>
  <!-- 需要设置改div的宽度和长度才能显示 -->
  <div id="main" style="width: 1200px; height: 500px"></div>
</template>
 
<script>
export default {
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.$mychart.line('main');
    },
  },
};
</script>
 
<style>
</style>复制

以上为echarts使用的三个简单方法，以后再补充。。。。