vue利用echart插件实现一个环形图

利用echart插件用vue封装了一个MyChart组件，用于实现环形图的展示。

<div>复制代码

问题1：环形图数据不变更

描述：MyChart组件在props中接受父组件传递过的数据bardata，并在watch中随时检测，数据如有变化的话，就重新绘制环形图。

MyChart.vue
props:{       
   bardata:{type:Object}
}

watch:{
  bardata(val){
    this.color = val.color                //对应option对象中的color
    this.legend_data = val.legend_data    //对应option.legend中的data属性
    this.series_data = val.series_data    //对应option.series中的data属性
}}复制代码

解决：在引用MyChart组件的父组件A中，在data中返回了bardata数据并传递给MyChart组件

<my-chart :bardata = "bardata"></my-chart>                                             A.vue复制代码

<script>                                                                               A.vue
export default{
  data(){
    return{
      bardata:{
        color:[],
        legend_data:[],
        series_data:[]
      }
    }
  }
}</script>复制代码

获取后台接口，拿到数据后。重新设置bardata中的属性，下面这样写不起作用

methods: {                                                                             A.vue
  setData(){
    getData().then((res)=>{
      this.bardata.color = res.color
      this.bardata.legend_data = res.legend_data
      this.bardata.series_data = res.series_data
    })
}}复制代码

然后换了一种写法，页面渲染就起作用了。

methods: {                                                                             A.vue
  setData(){
    getData().then((res)=>{
      let barObject = {}
      barObject.color = res.color
      barObject.legend_data = res.legend_data
      barObject.series_data = res.series_data
      this.bardata = barObject 
    })
}}复制代码

data中声明的bardata对象中的属性都是可响应式的，只有没在data中声明后增加的才是非响应式的。

vue不能检测到对象属性的添加和删除，所以使用Vue.set(对象，'key', 属性值 )，使新增加的属性key变成可相应式的。

可是，不能使用Vue.set()方法来改变data中声明对象的属性。而这个功能，没有添加或删除对象属性的操作，只是根据每次从后台数据的不同。由于对象数据的不改变，造成我一直停留在了错误的思维里，却不知这里跟Vue.$set()没有半点关系

问题2：数据少时，环形图的引导线都叠合在一起

在特别拥挤的时候，echart的插件series中的默认的labelLine都是同样的，同样的长度同样的数据，导致所有的数据都折叠到了一起。

数据特别少时，为了使它们的引导线内容错开，就需要根据对每个数据项进行单独属性的设置。让每个引导线的长度或者方向错开，最后只找到了设置引导线长度的属性

设置引导线的属性，可参考labelLine对象，里面有length（表示第1条引导线）和length2（表示第2条引导线）

labelLine:{
  length: 10,  //第一条引导线的长度
  length2:20   //第二条引导线的长度
}复制代码

此外，还需要在每个数据项中，单独设置。由于数据是后台接口获取的，所以在父组件bardata对象中的series_data中为每一数据项添加labelLine属性。

获取完后台数据，处理数据结构的时候，直接每一项数据项添加labelLine属性就可以实现了。

series_data中的数据结构为：（option中series中的data）

series: [
 data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'}
    {value:310, name:'邮件营销'}
  ]
]复制代码

设置后的series_data中的数据结构为：

series: [
 data:[
    {value:335, name:'直接访问',labelLine:{length:5,length2:20}},
    {value:310, name:'邮件营销',labelLine:{length:15,length2:20}}
    {value:310, name:'视频广告'}
  ]
]复制代码

思路大概就是这个思路，只能说很意外的解决了数据少时引导线和数据折叠的问题。就是设置每一数据项中的labelLine，其他数据也一样。

注重细节的话还是有很多不完美的地方。。。继续踩坑。。。吧。。。