效果图
最近在用echart发现官方文档没有画圆柱的示例，经过多方查找下找到了方法，下面就是实现低代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts多层装饰柱状图示例</title>
<!-- 引入 ECharts -->
<script src="https://echarts.apache.org/zh/js/vendors/echarts/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
transition: background-color 0.3s;
}
.dark-mode {
background-color: #121212;
color: #fff;
}
.chart-container {
width: 100%;
max-width: 1200px;
height: 500px;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: background-color 0.3s;
}
.controls {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
button {
padding: 8px 16px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #66b1ff;
}
</style>
</head>
<body>
<div class="controls">
<button id="randomDataBtn">随机生成数据</button>
<button id="updateThemeBtn">切换主题</button>
<button id="addItemBtn">添加指标</button>
<button id="removeItemBtn">删除指标</button>
</div>
<div class="chart-container" id="mainChart"></div>
<script>
// 初始化图表
const chartDom = document.getElementById('mainChart');
const myChart = echarts.init(chartDom);
// 生成随机数据
function generateRandomData(count = 5) {
const data = [];
// 预定义颜色集合
const colors = [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
'#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5793f3',
'#d14a61', '#675bba', '#0084ff', '#00c1d4', '#71e0a0'
];
for (let i = 0; i < count; i++) {
const baseColor = colors[i % colors.length];
data.push({
xName: `指标${i + 1}`,
kqpfwqll: Math.floor(Math.random() * 80) + 20, // 20-99之间的随机数
color: baseColor,
color2: echarts.color.lift(baseColor, -0.2), // 颜色加深
color3: echarts.color.lift(baseColor, 0.2), // 颜色变浅
color4: echarts.color.lift(baseColor, 0.4) // 颜色更浅
});
}
return data;
}
// 初始化数据
let _data = generateRandomData();
let unit = '%';
let isDarkTheme = false;
// 更新图表配置
function updateChart() {
const option = {
// 背景颜色根据主题切换
backgroundColor: isDarkTheme ? '#1e1e1e' : '#ffffff',
grid: {
top: "25%",
left: "5%",
bottom: "5%",
right: "5%",
containLabel: true,
},
tooltip: {
show: true,
backgroundColor: isDarkTheme ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.9)',
textStyle: {
color: isDarkTheme ? '#fff' : '#333'
},
formatter: (params) => {
if (params.seriesName === '(柱)') {
return `${params.name}: ${params.value}${unit}`;
}
return '';
}
},
animation: true,
animationDuration: 1000,
animationEasing: 'elasticOut',
xAxis: {
data: _data?.map((el) => el.xName),
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: isDarkTheme ? '#555' : '#999'
}
},
axisLabel: {
textStyle: {
fontSize: 13,
color: isDarkTheme ? '#ccc' : '#333'
},
margin: 30,
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [
{
type: "pictorialBar",
symbolSize: [40, 20],
symbolOffset: [0, -10],
z: 12,
label: {
normal: {
show: true,
position: 'top',
formatter: (params) => {
if (params.value == null || params.value == undefined || params.value === 0) {
return `{c|${'-'}} {d|${unit}}`
} else {
return `{c|${params.value}} {d|${unit}}`
}
},
rich: {
c: {
fontSize: 16,
color: isDarkTheme ? '#fff' : '#333'
},
d: {
fontSize: 14,
color: isDarkTheme ? '#ddd' : '#666'
}
},
textStyle: {
align: 'center'
},
fontSize: 16,
fontWeight: 'bold',
},
},
data: _data?.map((el) => {
return {
name: el.xName,
value: el.kqpfwqll,
symbolPosition: "end",
itemStyle: {
normal: {
color: el.color
}
}
}
})
}, {
type: "pictorialBar",
symbolSize: [40, 20],
symbolOffset: [0, 10],
z: 10,
data: _data?.map((el) => {
return {
name: el.xName,
value: 1,
itemStyle: {
normal: {
color: el.color
}
}
}
}),
}, {
name: "(内环)",
type: "pictorialBar",
symbolSize: [48, 20],
symbolOffset: [0, 16],
z: 1,
data: _data?.map((el) => {
return {
name: el.xName,
value: 1,
itemStyle: {
normal: {
color: "transparent",
borderColor: el.color2,
borderWidth: 10
}
}
}
}),
}, {
name: "(中环)",
type: "pictorialBar",
symbolSize: [60, 25],
symbolOffset: [0, 23],
z: 1,
data: _data?.map((el) => {
return {
name: el.xName,
value: 1,
itemStyle: {
normal: {
color: "transparent",
borderColor: el.color3,
borderType: "dashed",
borderWidth: 20
}
}
}
}),
}, {
name: "(外环)",
type: "pictorialBar",
symbolSize: [80, 35],
symbolOffset: [0, 24],
z: 1,
data: _data?.map((el) => {
return {
name: el.xName,
value: 1,
itemStyle: {
normal: {
color: "transparent",
borderColor: el.color3,
borderWidth: 5
}
}
}
}),
}, {
name: "(柱)",
type: "bar",
silent: true,
barWidth: 40,
data: _data?.map((el) => {
return {
name: el.xName,
value: el.kqpfwqll,
itemStyle: {
normal: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [{
offset: 0,
color: el.color4
}, {
offset: 1,
color: el.color
}]
}
}
}
}
})
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
}
// 初始化图表
updateChart();
// 按钮事件监听
document.getElementById('randomDataBtn').addEventListener('click', () => {
_data = generateRandomData(_data.length);
updateChart();
});
document.getElementById('updateThemeBtn').addEventListener('click', () => {
isDarkTheme = !isDarkTheme;
document.body.classList.toggle('dark-mode', isDarkTheme);
chartDom.style.backgroundColor = isDarkTheme ? '#1e1e1e' : '#ffffff';
updateChart();
});
document.getElementById('addItemBtn').addEventListener('click', () => {
if (_data.length < 10) { // 限制最多10个指标
const newIndex = _data.length + 1;
const colors = [
'#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
'#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5793f3'
];
const baseColor = colors[newIndex % colors.length];
_data.push({
xName: `指标${newIndex}`,
kqpfwqll: Math.floor(Math.random() * 80) + 20,
color: baseColor,
color2: echarts.color.lift(baseColor, -0.2),
color3: echarts.color.lift(baseColor, 0.2),
color4: echarts.color.lift(baseColor, 0.4)
});
updateChart();
}
});
document.getElementById('removeItemBtn').addEventListener('click', () => {
if (_data.length > 1) { // 至少保留一个指标
_data.pop();
updateChart();
}
});
// 监听窗口大小变化，调整图表
window.addEventListener('resize', () => {
myChart.resize();
});
</script>
</body>
</html>
代码部分解释
html部分就不做过多的解释自己看
(内环)(中环)(外环)那一部分的代码就是绘制最下面的三个圈的，我的项目中我去掉了， 去掉之后的3个就刚好是圆柱的上面圆盘，下面圆盘和圆柱