通过echarts绘制一个环形图(label定义)let data = [ { column1: "标准建设类", column2: "1173.0", }, { column1: "集成创新类", column2: "6850.0", }, { column1: "科技研发类", column2: "21110.0", }, { column1: "模式创新、业态创新类", column2: "2855.0", }, { column1: "软科学类", column2: "4821.0", }, ];
时间: 2023-07-07 12:43:07 浏览: 179
好的,以下是使用 echarts 绘制环形图的代码,包括自定义 label 的设置:
```
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 数据处理
data.forEach(item => {
item.column2 = parseFloat(item.column2);
});
let total = data.reduce((prev, curr) => prev + curr.column2, 0);
data.forEach(item => {
item.percent = (item.column2 / total * 100).toFixed(2) + '%';
});
// 指定图表的配置项和数据
var option = {
title: {
text: '各类别比例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: data.map(item => item.column1)
},
series: [
{
name: '比例',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: data.map(item => {
return {
name: item.column1,
value: item.column2,
label: {
show: true,
position: 'outside',
formatter: '{b}: {c} ({d}%)'
}
};
})
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
以上代码中,`data` 是您提供的数据,`chart` 是您指定的 echarts 图表容器的 ID。绘制出来的环形图将会显示各项的名称、数值和所占比例。自定义的 label 格式为“名称: 数值 (百分比)”并位于图形外部。
阅读全文