使用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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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
php实现购物车功能(下)
2016/01/05 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python 快速排序代码
2009/11/23 Python
python MySQLdb使用教程详解
2018/03/20 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
应届生服务员求职信
2013/10/31 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
微博营销计划书
2014/01/10 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
护士自我评价
2014/02/01 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
发展部经理职责规定
2014/02/22 职场文书
初中班主任评语
2014/04/24 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
员工合理化建议书
2014/05/19 职场文书
关键在于落实心得体会
2014/09/03 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
培养联系人考察意见
2015/06/01 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers