使用ECharts实现状态区间图 - CSDN文库

156 浏览量更新于2023-05-04 收藏 64KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

使用使用ECharts实现状态区间图实现状态区间图

需求背景需求背景

假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条

形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线正常、繁忙、故障、离线四种状态。以

WAN0为例，图中则表示了0~10分钟为正常正常，10~25分钟为繁忙繁忙，25~45分钟为故障故障，45~60分钟为离线离线。

根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现

一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型自定义类型图表中找到了一个相似的示例，地址

通过研究示例代码并进行一番改造，终于实现了上述需求。

在实现的过程中遇到了一个小问题，那就是使用自定义图表实现chart之后，图例不好处理。通过查看条形图的示例，找到了

一种显示图例的方法，那就是使用空的条形图来显示图例使用空的条形图来显示图例，因为在series里面配置了条形图并配置name后，echart会自动根

据name的值去legend的配置中匹配对应的图例名字并显示。

完整代码如下，保存于本地之后再自己去echart官网下载库文件（完整版）之后即可运行：

<!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: {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38642864

粉丝: 2
资源: 899

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈