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

  • Z时代
  • 2024-03-09
  • 分类：IT

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

后台数据是这样的

   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}
   ]

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

回答：

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

回答：

es6 map

回答：

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

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 
    .....
  }

以上是 用echarts饼图怎么显示后台传过来的数据？ 的全部内容， 来源链接： utcz.com/p/935386.html

回到顶部