如何在ECharts中设置3D柱状图的颜色？
原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 3D柱状图颜色设置</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
}
#chart {
width: 100%;
height: 600px;
}
.color-controls {
margin-bottom: 20px;
padding: 15px;
background: #f0f0f0;
border-radius: 8px;
}
button {
margin: 0 10px 10px 0;
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="color-controls">
<h3>颜色模式切换</h3>
<button id="uniform">统一颜色</button>
<button id="gradient">渐变色映射</button>
<button id="category">分类颜色</button>
<button id="custom">自定义逻辑</button>
</div>
<div id="chart"></div>
<script>
const chart = echarts.init(document.getElementById('chart'));
// 生成示例数据
const categories = ['产品A', '产品B', '产品C', '产品D', '产品E'];
const years = ['2019', '2020', '2021', '2022', '2023'];
const data = [];
for (let i = 0; i < categories.length; i++) {
for (let j = 0; j < years.length; j++) {
data.push([
i, // x轴坐标
j, // y轴坐标
Math.floor(Math.random() * 100) + 10 // 数值
]);
}
}
// 基础配置
let option = {
tooltip: {
formatter: (params) => {
return `${categories[params.data[0]]}<br>
${years[params.data[1]]}: ${params.data[2]}`;
}
},
xAxis3D: {
type: 'category',
data: categories
},
yAxis3D: {
type: 'category',
data: years
},
zAxis3D: {
type: 'value'
},
grid3D: {
viewControl: {
alpha: 30,
beta: 40
},
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: data,
shading: 'realistic',
barSize: [20, 20],
itemStyle: {
color: '#165DFF', // 默认统一颜色
realisticMaterial: {
roughness: 0.7
}
}
}]
};
// 1. 统一颜色模式
document.getElementById('uniform').addEventListener('click', () => {
chart.setOption({
visualMap: undefined, // 移除视觉映射
series: [{
itemStyle: {
color: '#165DFF'
}
}]
});
});
// 2. 渐变色映射模式
document.getElementById('gradient').addEventListener('click', () => {
chart.setOption({
visualMap: {
max: 110,
calculable: true,
color: ['#FF4500', '#FFA500', '#32CD32'], // 红-橙-绿渐变
inRange: {
opacity: 0.8
}
},
series: [{
itemStyle: {
color: undefined // 由visualMap控制
}
}]
});
});
// 3. 分类颜色模式
document.getElementById('category').addEventListener('click', () => {
chart.setOption({
visualMap: undefined,
series: [{
itemStyle: {
// 根据x轴分类（产品类别）设置颜色
color: function(params) {
const colorList = ['#165DFF', '#36CFC9', '#722ED1', '#FF7D00', '#F5222D'];
return colorList[params.data[0] % colorList.length];
}
}
}]
});
});
// 4. 自定义逻辑模式
document.getElementById('custom').addEventListener('click', () => {
chart.setOption({
visualMap: undefined,
series: [{
itemStyle: {
// 自定义复杂逻辑：高值红色，低值蓝色，中间值黄色
color: function(params) {
const value = params.data[2];
if (value < 40) return '#165DFF';
if (value < 70) return '#FFD700';
return '#F5222D';
}
}
}]
});
});
chart.setOption(option);
window.addEventListener('resize', () => {
chart.resize();
});
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
