echarts 饼图如何将http://localhost:7001/home/query此接口返回的数据格式为{"stagesz":0,"stage":0,"suborder":0,"announce":0,"zs":10,"mytyper":2,"mytypez":8,"cld":10,"clb":0}展示出来
时间: 2023-07-02 10:05:16 浏览: 130
Echarts饼图之数据展示
5星 · 资源好评率100%
首先,你需要将数据解析成 ECharts 饼图所需要的数据格式。ECharts 饼图需要的数据是一个数组,数组中每一项为一个对象,对象必须包含 `name` 和 `value` 两个属性。其中 `name` 表示饼图上每一块的名称,`value` 表示饼图上每一块的数值。
你可以在获取到数据后,对其进行解析,如下所示:
```js
var data = {"stagesz":0,"stage":0,"suborder":0,"announce":0,"zs":10,"mytyper":2,"mytypez":8,"cld":10,"clb":0};
var pieData = [
{ name: 'stagesz', value: data.stagesz },
{ name: 'stage', value: data.stage },
{ name: 'suborder', value: data.suborder },
{ name: 'announce', value: data.announce },
{ name: 'zs', value: data.zs },
{ name: 'mytyper', value: data.mytyper },
{ name: 'mytypez', value: data.mytypez },
{ name: 'cld', value: data.cld },
{ name: 'clb', value: data.clb }
];
```
解析完成后,你可以使用 ECharts 的 `option` 配置项中的 `series` 属性来设置饼图的数据,如下所示:
```js
option = {
series: [
{
type: 'pie',
data: pieData
}
]
};
```
最后,你可以将 `option` 对象传入到 ECharts 实例的 `setOption` 方法中,即可将数据展示为饼图:
```js
myChart.setOption(option);
```
其中,`myChart` 为你创建的 ECharts 实例对象。
阅读全文