使用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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
怎么清空javascript数组
May 11 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript常见用法总结
May 22 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
JavaScript监听一个DOM元素大小变化
Apr 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
15条JavaScript最佳实践小结
2013/08/09 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
微信小程序实现发红包功能
2018/07/11 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python模块smtplib学习
2018/05/22 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
买卖车协议书
2014/04/21 职场文书
社团活动总结格式
2014/08/29 职场文书
交通安全横幅标语
2014/10/07 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
公司员工奖惩制度
2015/08/04 职场文书
python实现简易名片管理系统
2021/04/11 Python
pandas数值排序的实现实例
2021/07/25 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android