需求:使用echarts饼状图,如何根据后端返回的数据 funListT01: [ { id: 1, name: "平台母线直供电(路)", amount: 1, }, { id: 2, name: "平台母线控制供电(路)", amount: 90, }, { id: 3, ,如何实现并且同一水平线,不同垂直线摆放
时间: 2024-02-10 19:07:55 浏览: 18
感谢您的提问。根据您的需求,您可以按照以下步骤使用echarts饼状图,并实现同一水平线,不同垂直线摆放:
1. 在前端页面引入echarts库,并创建一个div容器,用于显示饼状图。
2. 从后端获取数据,将数据处理成echarts所需的格式,如下:
```
let data = [
{value: 1, name: '平台母线直供电(路)', line: 1},
{value: 90, name: '平台母线控制供电(路)', line: 1},
{value: 9, name: '其他', line: 2},
];
```
其中,value表示数据的值,name表示数据的名称,line表示数据所在的垂直线。
3. 初始化echarts,并设置饼状图的样式和配置项,如下:
```
let myChart = echarts.init(document.getElementById('chart-container'));
let option = {
title: {
text: '饼状图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['平台母线直供电(路)', '平台母线控制供电(路)', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data,
roseType: 'radius',
itemStyle: {
borderRadius: 5
}
}
]
};
myChart.setOption(option);
```
其中,title表示饼状图的标题,tooltip表示鼠标悬浮时的提示信息,legend表示图例,series表示系列,其中type为'pie'表示饼状图,radius表示饼图的半径,data表示饼图的数据,roseType表示饼图的类型,itemStyle表示饼图的样式。
4. 最后,将处理好的数据赋值给饼状图的data属性,同时根据不同的垂直线,设置不同的圆心位置,即可完成饼状图的绘制。
```
option.series[0].data = data;
myChart.setOption(option);
// 根据不同的垂直线,设置不同的圆心位置
myChart.setOption({
series: [{
center: ['25%', '50%'],
data: data.filter(item => item.line === 1)
}, {
center: ['75%', '50%'],
data: data.filter(item => item.line === 2)
}]
});
```
希望以上步骤能够帮助到您。如果您有其他问题,可以随时提出。