echarts环形图颜色设置
时间: 2025-01-29 16:15:41 浏览: 51
在ECharts中,环形图的颜色设置可以通过配置项中的`color`属性来实现。`color`属性可以接受一个颜色数组,数组中的每个颜色值对应环形图中的一个扇区。以下是一个简单的示例,展示了如何设置环形图的颜色:
```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 = {
title: {
text: '环形图示例',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae']
}
]
};
chart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,`color`属性设置了环形图的颜色数组,每个颜色值对应一个扇区的颜色。你可以根据需要调整颜色数组中的颜色值,以达到你想要的视觉效果。
阅读全文
相关推荐


















