给出前后端不分离项目画一个类似echartsd的饼状图的代码
时间: 2024-03-02 20:49:25 浏览: 18
好的,为了画出类似 echarts 的饼状图,我们可以使用 JavaScript 库 echarts 来实现。以下是基于 echarts 的前后端不分离项目饼状图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>前后端不分离项目饼状图</title>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="pieChart" style="width: 800px;height:400px;"></div>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('pieChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '前后端不分离项目饼状图',
subtext: '项目结构和分工'
},
tooltip: {},
series: [{
name: '项目结构',
type: 'pie',
radius: '55%',
data: [
{value: 40, name: '前端'},
{value: 60, name: '后端'}
]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
以上代码使用 echarts 库创建了一个饼状图,并设置了图表的标题、提示信息和数据。其中,`radius` 属性指定了饼状图的半径大小,`data` 属性指定了前后端各自所占的比例。最后,使用 `setOption` 方法将图表显示在页面上。