继续echarts环形写入vue爬坑（二）

一、今天继续昨天的环形组件的编写，昨天只完成了一个，今天对两个环形组件进行拼接，由于两个环形组件的属性会有很多重复的项，所以考虑了一些方法，考虑到父传子的模式进行组件传递，但是由于对组件掌握水平有限，这种方法还在研究阶段，最终还是新建了一个red的组件，然后对两个进行拼接。

经过这几天的学习，以下为引入组件的重要三步：

1. import 引入import Red from './pages/Red'

2. Components注册组件components:{Red},

3. 在template中引入<Red></Red>

这两个小组件比较相似，不再进行详细介绍。

<---效果图

 

二、在以上的两个组件之后，又写了两个圆环组件，其实这两个与上两个圆环组件差不多，但是这两个组件多了一个内环，并且与外环互不影响，经过查找文档，访问博客，找到了一个解决方法，

在option中有个series属性，里面定义环形的变量

    

游客来源为外环，再定义一个name为内环的内环，然后可以根据需求修改里面的属性，那么一个坑又出来了，在之前定义环形背景色的时候是在series全局定义的，这种写法就导致内环和外环拥有相同的背景色，找资料之旅又开始了...

经过不懈努力，找到了对应的属性可以改变环的背景色，所以在这里改变内环的颜色，就需要在定义的内环区域里写一个属性，就是下方的代码，类似于内联样式，覆盖了外部定义的color属性，就可以改变内环颜色了。

这两个主要研究这两个环形，里面属性还是比较多的。比较麻烦，多总结。

 

参考：http://echarts.baidu.com/echarts2/doc/doc.html#ItemStyle