ECharts自定义系列实现多状态区间条形图
本文介绍如何使用ECharts自定义系列（custom series）实现多状态区间条形图。针对堆叠条形图无法在同一类别中多次显示同一状态的问题，通过自定义渲染逻辑，利用value数组定义x轴区间，并配合空条形图解决图例显示问题，最终实现网口状态随时间变化的可视化效果。
需求背景
需求背景
图表设计与需求分析
假设需要展示多个网口在特定时间段内的多种运行状态。图表y轴表示不同的网口，x轴表示时间（单位：分钟）。通过条形图中不同颜色区间来区分状态：深蓝色代表正常，浅蓝色代表繁忙，橙色代表故障，红色代表离线。以WAN0为例，图表显示其在0至10分钟处于正常状态，10至25分钟为繁忙状态，25至45分钟为故障状态，45至60分钟为离线状态。
解决方案与实现思路
基于上述需求，初步考虑使用条形图。然而，若采用堆叠条形图，每种状态在每个网口对应的图形中仅能出现一次，这无法满足多状态区间显示的需求。经过查阅ECharts官方示例，在自定义类型图表部分找到了一个相似的案例，参考地址见。
通过对示例代码的研究并进行适当改造，最终实现了上述多状态区间显示的需求。
图例显示问题处理
在实现过程中遇到一个技术难点：使用自定义图表渲染后，图例（legend）难以正确显示。通过参考条形图的示例，找到了一种解决方案：利用空的条形图来生成图例。具体做法是在series中配置条形图并设置name属性，ECharts会自动根据name的值在legend配置中匹配对应的图例名称并显示。
代码实现与数据项说明
完整代码保存于本地后，需从ECharts官网下载完整版库文件（详见）方可运行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="chart-box" style="width:400px;height:300px;border:1px solid black;"></div>
<script src="./echarts.min.js"></script>
<script>
// 初始化echart
var chart = echarts.init(document.getElementById('chart-box'));
// 各状态的颜色
var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531'];
// 四种状态
var state = ['正常', '繁忙', '故障', '离线'];
// echart配置
var opt = {
color: colors,
tooltip: {
formatter: function (params) {
return params.name + ':' + params.value[1] + '~' + params.value[2];
}
},
legend: {
data: state,
bottom: '1%',
selectedMode: false, // 图例设为不可点击
textStyle: {
color: '#000'
}
},
grid: {
left: '3%',
right: '3%',
top: '1%',
bottom: '10%',
containLabel: true
},
xAxis: {
min: 0 // x轴零刻度对应的实际值
},
yAxis: {
data: ['WAN0', 'WAN1']
},
series: [
// 用空bar来显示四个图例
{name: state[0], type: 'bar', data: []},
{name: state[1], type: 'bar', data: []},
{name: state[2], type: 'bar', data: []},
{name: state[3], type: 'bar', data: []},
{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = 24;
return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
encode: {
x: [1, 2],
y: 0
},
data: [
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [0, 0, 10]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '繁忙',
value: [0, 10, 25]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '故障',
value: [0, 25, 45]
},
{
itemStyle: { normal: { color: colors[3] } },
name: '离线',
value: [0, 45, 60]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [1, 0, 15]
},
{
itemStyle: { normal: { color: colors[1] } },
name: '繁忙',
value: [1, 15, 20]
},
{
itemStyle: { normal: { color: colors[2] } },
name: '故障',
value: [1, 20, 35]
},
{
itemStyle: { normal: { color: colors[3] } },
name: '离线',
value: [1, 35, 40]
},
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [1, 40, 45]
},
{
itemStyle: { normal: { color: colors[3] } },
name: '离线',
value: [1, 45, 60]
}
]
}
]
};
chart.setOption(opt);
</script>
</body>
</html>关于自定义图表中data字段的数据项结构说明如下：
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [0, 0, 10]
}
- itemStyle：定义所渲染矩形的样式属性。
- name：该矩形所代表的状态名称。
- value：数组第0项代表类别标识，例如0代表WAN0，1代表WAN1；第1项和第2项分别代表该矩形区域在x轴上的起始坐标和结束坐标，例如[0, 10]表示从0分钟到10分钟。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS代码在线格式化工具推荐：无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境，5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26