使用ECharts实现状态区间图

最新推荐文章于 2024-05-31 18:04:07 发布
最新推荐文章于 2024-05-31 18:04:07 发布
阅读量1.6w 收藏 16
点赞数 5
分类专栏： JavaScript 文章标签： echarts echarts3-0 区间图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juhaotian/article/details/78294235
版权

需求背景

假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。

这里写图片描述

根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址如下：

http://echarts.baidu.com/demo.html#custom-profile

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

在实现的过程中遇到了一个小问题，那就是使用自定义图表实现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: {
                    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，结束于1。
Orange_J
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【学习日记2023.6.2】之 管理端报表统计
qq_42575689的博客
06-02 643
营业额、用户、订单、销量统计展示
echarts 反映机器一天的运行状态图（以8点为分界点）
zq爱生活爱代码的博客
05-23 1819
<div id="chart" style="width:800px;height:500px;"></div> $.ajax({ type: 'post', url: url, contentType: "application/x-www-form-urlencoded; ", dataType: "json"...
echarts通过自定义系列和时间轴实现一段连续时间内，不同时间下的状态显示
最新发布
weixin_43527608的博客
05-31 471
体会就是写echarts真的很考验创新能力，因为需求千变万化。没想到最常用的居然是障眼法hhh等我有空，后续再更新完整的代码。
echarts的时序图
飞翔༒之翼
06-11 6810
这个是在网上看到的，但原地址忘记了 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="chart-box" style="width:400px;height:300px;border:1px sol...
Echarts 实现 设备运行状态图(甘特图) 工业大数据展示
Heby的博客
10-24 2175
以上就是echarts性能图的option配置。
echarts-自定义-性能分析图
时光淡然
04-27 1722
效果图： option配置 function renderItem(params: any, api: any) { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = api.size([0, 1])[1];
echarts设备状态运行图
cjy_fly的博客
01-11 1998
echarts设备状态运行图
echarts时间段柱形图
想去旅行的静静的博客
04-03 4351
参考文章： https://www.cnblogs.com/xufeikko/p/9956765.html https://www.jianshu.com/p/661a07340a87 https://www.echartsjs.com/examples/zh/editor.html?c=custom-profile https://www.jianshu.com/p/0886bcd913...
echarts3省市县地图
11-05
ECharts 支持多种图表，包括柱状图、折线图、饼图、散点图以及地图等。它基于 WebGL 和 Canvas 技术，能够实现流畅的交互和动态数据更新。 2. **省市县地图数据** 在 ECharts 中，绘制地图通常需要地图的地理信息...
ECharts从零实战地图可视化交互（支持下钻，选中，高亮，伪热力图，地图纹理等）
12-14
在这个“ECharts从零实战地图可视化交互”的项目中，我们将深入探讨如何利用ECharts实现地图的可视化，并添加下钻、选中、高亮、伪热力图以及地图纹理等高级功能。这个项目特别适合对数据可视化感兴趣的开发者，尤其...
echarts_respect452_echarts_
10-01
ECharts 是一个基于 JavaScript 的开源可视化库，广泛用于创建数据驱动的图表，如折线图、柱状图、饼图、散点图等。在"echarts_respect452_echarts_"这个主题中，我们可以深入探讨ECharts的多种图表样式显示以及其在...
使用echarts实现简单的动态缩放分页性能分析图
txp1993的专栏
05-10 1883
记录下来，以备之需，实例代码如下： //初始化参数或者方法 app.initTime = 6*1000;//设置更新一次数据的间隔时间ms app.initTimeNum = 100;//设置展示时间段数据个数 app.clickSaveData = {};//点击分析图的数据存储对象 var legendData = ['表读取','字段选择','值映射','值映射1','值映射2','值映
echart 做的一个设备运行状态
07-24 1593
<!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the A
echarts中graphic_使用ECharts实现状态区间图
weixin_39532754的博客
12-23 1309
需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以wan0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用...
echarts 自定义区间 线段图（横向，纵向）
weixin_45652891的博客
12-28 890
/ 右终点【156，‘平均数’】【180，中位数】var lowPoint = api.coord([api.value(2),yValue]);// 左起点【15，‘平均数’】【20，中位数】[0,‘平均数’,15, 156],[1, ‘中位数’,122.5],[1,‘中位数’,20,180],[0, ‘平均数’,115],data: [‘平均值’]data: [‘平均值’]name: ‘平均值’,
使用echarts实现时间状态区间图
热门推荐
IMFaust的博客
06-17 1万+
该图例参考了官方的demo:https://echarts.baidu.com/examples/editor.html?c=custom-profile以及https://www.cnblogs.com/cindy-hmy/p/8251193.html var colors = ['blue', 'red','gray'];//三种状态的颜色 var state = ['深睡'...
使用echarts实现一个地图
05-12
要使用 echarts 实现一个地图，需要进行以下几个步骤： 1. 下载 echarts，可以从官网下载或通过 npm 安装。 2. 导入 echarts 库文件，例如： ```html <script src="echarts.min.js"></script> ``` 3. 准备地图数据，可以从 echarts 官网下载或使用地图数据 API 获取。 4. 创建一个 div 容器，用于显示地图，例如： ```html <div id="myMap" style="width: 800px; height: 600px;"></div> ``` 5. 编写 JavaScript 代码，实现地图的渲染和交互。 ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('myMap')); // 配置地图数据 var option = { title: { text: '地图标题' }, tooltip: { trigger: 'item' }, series: [{ name: '地图名称', type: 'map', mapType: 'china', // 地图类型 roam: true, // 开启缩放和拖拽 label: { show: true }, data: [ // 地图数据 ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 6. 可以根据需求添加其他交互功能，比如点击地图某个区域后弹出信息框等。 注意：以上代码仅为示例，具体实现需要根据实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值