echarts饼图关键代码
时间: 2024-05-13 16:11:08 浏览: 25
ECharts是一个基于JavaScript的开源可视化库,用于构建交互式的图表和数据可视化界面。下面是使用ECharts绘制饼图的关键代码:
1. 引入ECharts库:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
```
2. 创建一个具有指定宽度和高度的DOM容器:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
3. 初始化ECharts实例:
```javascript
var chart = echarts.init(document.getElementById('chart'));
```
4. 配置饼图的数据和样式:
```javascript
var option = {
title: {
text: '饼图示例',
left: 'center'
},
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}]
};
```
5. 将配置项设置给ECharts实例并渲染图表:
```javascript
chart.setOption(option);
```
以上代码会创建一个宽度为600px,高度为400px的饼图,并展示一些示例数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)