echart圆环图
时间: 2025-04-20 11:33:05 浏览: 32
### ECharts 圆环图使用教程
#### 创建基础圆环图
为了创建一个基本的圆环图,首先需要引入 ECharts 库并初始化图表实例。下面是一个简单的 HTML 文件结构用于加载 ECharts 并设置容器:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series : [
{
name: '访问来源',
type: 'pie',
radius : ['25%', '36%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
这段代码展示了如何定义一个具有特定半径范围 `['25%', '36%']` 的简单圆环图[^1]。
#### 添加渐变效果
对于更高级的效果,比如给扇形区域应用线性渐变颜色,则可以调整 `series` 中的数据部分如下所示:
```javascript
{
value: 330,
name: '正常',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: '#2D38FF' // 起始颜色
}, {
offset: 1,
color: '#969BFB' // 结束颜色
}],
globalCoord: false // 默认为 false
}
}
}
```
此段脚本实现了从蓝色到淡紫色的颜色过渡,并应用于名为“正常”的分类上[^2]。
通过上述两部分内容的学习,应该能够掌握构建带有自定义样式的 ECharts 圆环图的方法。可以根据实际需求进一步探索更多功能选项来增强可视化体验。
阅读全文
相关推荐


















