echarts环形图设置颜色90度渐变
时间: 2025-01-30 21:11:45 浏览: 95
在ECharts中,可以通过配置`color`属性来实现环形图的颜色渐变效果。要实现90度渐变,可以使用线性渐变。以下是一个示例代码,展示了如何设置环形图的颜色为90度渐变:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false
}
},
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
}
}]
};
chart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,`itemStyle.color`属性配置了线性渐变。`x`和`y`表示渐变的起点,`x2`和`y2`表示渐变的终点。通过调整这些值,可以实现不同方向的渐变效果。
阅读全文
相关推荐


















