Echarts饼状图绘制
时间: 2023-09-10 16:11:40 浏览: 108
Echarts是一个强大的JavaScript图表库,支持多种图表类型,包括饼状图。下面是一个简单的饼状图绘制的例子:
首先,在HTML文件中引入echarts:
```html
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
```
接着,在JavaScript文件中定义一个容器,并初始化echarts:
```javascript
// 定义一个容器
var container = document.getElementById('chart');
// 初始化echarts
var chart = echarts.init(container);
```
然后,定义数据和配置项:
```javascript
// 定义数据
var data = [
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40},
{name: 'E', value: 50},
];
// 定义配置项
var option = {
title: {
text: '饼状图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['A', 'B', 'C', 'D', 'E']
},
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
}
]
};
```
最后,将配置项应用于echarts实例:
```javascript
// 应用配置项
chart.setOption(option);
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 饼状图示例</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 定义一个容器
var container = document.getElementById('chart');
// 初始化echarts
var chart = echarts.init(container);
// 定义数据
var data = [
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40},
{name: 'E', value: 50},
];
// 定义配置项
var option = {
title: {
text: '饼状图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['A', 'B', 'C', 'D', 'E']
},
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
}
]
};
// 应用配置项
chart.setOption(option);
</script>
</body>
</html>
```
以上代码可在浏览器中运行并查看效果。
阅读全文