用echarts饼图怎么显示后台传过来的数据?

洛阳彭于晏
  • 7

后台数据是这样的

   data:[
     {class_name:xxxx,cont:xxxx,percentage:xxx},
     {class_name:xxxx,cont:xxxx,percentage:xxx},
     {class_name:xxxx,cont:xxxx,percentage:xxx}
   ]
   

而echarts饼图需要的数据格式是

   
   data:[
     {value:xxx;name:xxx},
     {value:xxx;name:xxx},
     {value:xxx;name:xxx}
   ]

怎么把后台传过来的数据转化成这种

回复
阅读 941
4 个回答

你用map之类的方法,处理完后端数据后,需要重新setOption一下。
就是需要重初始化下echart

不知道数据是个什么对应关系

const echartData = data.map(item => {
    return {
        value: item.cont,
        name: item.class_name
    }
});

用map,就是你前端再次处理一次数据。用楼上方法。至于你说的初始化echarts没值问题。

  数据:
  data(){
     return{
      echartsData:[] //你处理后获取的新数组
    }
  }
  
  方法:
  getData(){
    ...do something  //你get或者post请求获得原始data
    
   this.echartsData = data.map(item => {
        return {
          value: item.cont,
          name: item.class_name
        }
    });
  }
  
  echart(){   //你echart视图代码
    let dataArr = this.echartsData  //这里 datadataArr直接赋值给echart里 data:dataArr 
    .....
  }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏