使用ECharts实现状态区间图


Posted in Javascript onOctober 25, 2018

需求背景

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

使用ECharts实现状态区间图

根据此图,很容易想到可以用条形图试试。但后来发现,如果用堆叠条形图,则每种状态在每一个网口对应的图形中只能出现一次,这不能实现需求。于是继续查阅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: {
          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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
javascript的BOM汇总
Jul 16 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
详解js访问对象的属性和方法
Oct 25 #Javascript
深入浅析js原型链和vue构造函数
Oct 25 #Javascript
AngularJS 多指令Scope问题的解决
Oct 25 #Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
webpack打包非模块化js的方法
Oct 24 #Javascript
如何实现一个webpack模块解析器
Oct 24 #Javascript
You might like
用Zend Encode编写开发PHP程序
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
简单的三步vuex入门
2018/05/20 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python实现数据写入excel表格
2018/03/25 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
夜大自我鉴定
2013/10/31 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
写给老师的保证书
2015/05/09 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers