vue学习【一】vue引用封装echarts并展示多个echarts图表

大家好，我是一叶，经过一段时间对vue的学习，我打算把vue做一个系列，把踩过的坑和大家分享一下。

现在开始第一章：vue引用并封装echarts

在文章开始前，我先舔波echarts（真香）。阿里的G2和百度的echarts都是很不错的，echarts上手难度小，并且用户多，文档多，生态环境较好，所以中小项目的话echarts就是首选。加个题外话，我把G2、echarts都po出来，大家凭喜好选取。

G2官方demo地址：

https://antv.alipay.com/zh-cn/index.html

echarts官方demo地址：

https://echarts.baidu.com/

现在开始干活，进入echarts网址中，我们能看到，图表的主要参数都在option这函数里，如图1所示。我们将option（）放到vue中的methods中即可引用。

图1

在项目中打开命令行（直接在地址栏输入cmd即可打开dos面板），输入命令，如图2 所示。

npm install echarts

图2

打开项目，创建views文件夹，存放父组件index.vue，在components文件夹下创建echartscom.vue子组件，如图3所示。echartscom.vue中主要放option（），用来实现图表渲染，index.vue存放数据，echartscom.vue引用index.vue的数据从而形成父子组件间的传值。

图3

思路说完了，接下来就是代码，代码比我说得清楚，看他别看我，skr。

子组件，echartscom.vue

 1 <!-- echartscom.vue -->
 2 <template>
 3   <div class="charttest">
 4     <div style="width:400px;height:400px;" :id="echarts" class="echarts" ref="echarts">
 5     </div>
 6   </div>
 7 </template>
 8  
 9 <script>
10   import echarts from 'echarts'
11   export default {
12     name:'echartscom',
13     data() {
14       return {};
15     },
16     methods: {
17       drawCharts() {
18         var myChart = echarts.init(document.getElementById(this.echarts));
19         myChart.setOption({
20           tooltip: {
21             trigger: 'item',
22             formatter: '{a} <br/>{b}: {c} ({d}%)'
23           },
24           legend: {
25             orient: 'vertical',
26             x: 'left',
27             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
28           },
29           series: [
30             {