公司最近做项目需要用到图表，以前是使用echarts,现在也是用这个，没什么好纠结的！ 但是最近发现以前每次做图表之类的都没有封装，每次做图表都要从新去配置之类的，写了好多重复代码，感觉很累啊，所以自己把图表封装成子组件使用，代码工作量减轻了很多，而且子组件使用了数据进行监听和图表自适应屏幕大小，这样以后会方便很多了！
当然公司的项目肯定不能发出来了，我会做个简单的demo出来
先截个图吧！
其实我也未作什么太复杂的工作，以前工作中，页面中要2个图表，我在methods:{}中写两个方法配置之类的，类似这样子：
好了，首先第一步，使用echarts当然要引用了
1. vue 项目中 引用echarts
cnpm install echarts -S
执行完毕后再 main.js中引入
因为是pc端的项目，用了element ui （不重要）,引入之后就可以在全局使用了，之前对这个不是很懂，每个要图表页面都引入echarts，就像这个样子：
使代码写的乱七八糟的,现在在全局引用了，就不需要在每个用图表的页面中引入了
2. 父子组件中使用图表，现在我做的这个页面把他分成两个部分，这个页面整体为父，两个图表为子组件，这样子
1.先看下父组件代码，样式类的请忽视
import linegraph from '@/components/linegraph.vue' export default { data(){ return{ notAccess:false, ChartLineGraph2:null, option:{ title: { text: '全年产量趋势图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}' }, legend: { left: 'center', data: ['本年', '上年'], bottom:0 }, xAxis: { type: 'category', name: 'x', splitLine: {show: false}, data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, grid: { left: '1%', right: '2%', bottom: '8%', containLabel: true }, yAxis: { type: 'category', name: 'y', splitLine: {show: true}, data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'] }, series: [ { name: '本年', type: 'line', data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56] }, { name: '上年', type: 'line', data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12] }, ] }, option2:{ title: { text: '全年设备产量对比图', left: 'center' }, xAxis: { type: 'category', data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7'] }, yAxis: { type: 'value' }, legend: { left: 'center', data: ['本年', '上年'], bottom:0 }, grid: { left: '1%', right: '2%', bottom: '8%', containLabel: true }, series: [ { name: '本年', data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', barWidth:30, }, { name: '上年', data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', barWidth:30, }] } } }, mounted(){ }, components:{ ErrorTip, linegraph, } }
这是父组件代码，两个图表不管是折线图还是柱状图都是使用 linegraph.vue这个子组件来进行的，因为我把echarts图表生成的配置项都放在了父组件里面，然后通过父组件给子组件传值实现图表生成，
3.父组件我们看完了，现在我们看下是如何封装的图表类linegraph.vue子组件，我先截图一下，然后解释：
这里需要注意一下这几个问题，