本文主要是介绍投票项目_引入Echart 绘制饼状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 后端接口返回查到的数据
@GetMapping("/listResult/{id}")@ApiOperation("显示投票结果接口")public R<List<Map<String, Object>>> listTaskVote(@PathVariable String id) {log.info("传来的id:", id);List<Map<String, Object>> taskVote = voteService.getTaskVote(id);return R.success(taskVote);
}2. 前端发送请求,接收并处理数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 在<head>标签内添加 --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>// 加载ECharts库var pieChartDom = document.getElementById('main');var myChart = echarts.init(pieChartDom);// 请求后端数据fetch('/listResult/35').then(response => response.json()).then(data => {var option = {title: {text: '饼状图示例'},tooltip: {},legend: {data: data.data.map(item => item.name)},series: [{name: '类别分布',type: 'pie',radius: '55%',center: ['50%', '60%'],data: data.data.map(item => ({ name: item.name, value: item.value })),emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});</script>
</html>这篇关于投票项目_引入Echart 绘制饼状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
