echarts饼状图配置
时间: 2024-10-01 18:01:16 浏览: 21
ECharts是一个强大的JavaScript图表库,创建饼状图(Pie Chart)非常直观。以下是基本的饼状图配置步骤:
1. **引入ECharts库**:
首先,在HTML文件中引入ECharts的JS库。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
```
2. **初始化图表**:
创建一个`<div>`元素用于显示图表,并设置其ID,然后在JavaScript中初始化图表。
```javascript
var chart = echarts.init(document.getElementById('main'));
```
3. **数据准备**:
准备一组数据,包括标签名和对应的值。例如:
```json
var data = [
{ value: 335, name: '苹果' },
{ value: 310, name: '香蕉' },
{ value: 234, name: '橙子' },
{ value: 135, name: '葡萄' }
];
```
4. **配置选项**:
定义饼状图的配置项,包括标题、系列(series)、颜色等。
```javascript
var option = {
title: {
text: '水果销售比例'
},
tooltip: {},
series: [{
type: 'pie', // 类型为饼图
radius: '75%', // 半径大小
center: ['50%', '60%'], // 中心位置
data: data,
label: {
normal: {
show: true,
position: 'center',
formatter: '{b} : {c}%'
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
```
5. **渲染图表**:
将配置项应用到图表上,使其显示出来。
```javascript
chart.setOption(option);
```
阅读全文