echarts插件封装
百度的echarts裤并没有在vue中封装插件，我们在项目中使用 echarts时，在组件中去引用，从而导致我们的项目不好管理，特别是echarts用的多的情况下，整个项目不好维护，止于此，我们可以考虑将echarts封装成一个插件，从而方便管理，话不多说，上干货。
众所周知，Vue.use(XXX)中，XXX代表插件名，这个方法表示中代表插件中必须要实现一个install方法
1.安装
npm install echarts@4.X -S
2.使用
2.1 第一种方式：组件内使用
组件的方式是需要在用到的组件中引入整个echarts裤，优点是方便直接，缺点也很明显，用到的地方多了会使得整个项目变的臃肿
2.2 第二种方式：在原型对象上挂载
在原型对象上挂载的方式是比较省空间的，但这样每个组件都可以去修改这个原型对象，这样会导致系统不稳定，可能会出现某些未知的错误，鉴于此，请看第三种方式
在main.js中：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
组件中使用：
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 组件中使用（可根据实际情况传参）
以上为echarts使用的三个简单方法，以后再补充。。。。
推荐文章
发表评论