使用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 相关文章推荐
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
vue视图不更新情况详解
May 16 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
django中瀑布流写法实例代码
2019/10/14 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
django在开发中取消外键约束的实现
2020/05/20 Python
PyQt5实现画布小程序
2020/05/30 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
求职自荐信格式
2013/12/04 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
医院合作协议书
2014/08/19 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
五一劳动节慰问信
2015/02/14 职场文书