使用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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
20个最新的jQuery插件
Jan 13 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
JS实现打砖块游戏
Feb 14 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
vue实现井字棋游戏
Sep 29 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』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue cli3适配所有端方案的实现
2020/04/13 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Python反射和内置方法重写操作详解
2018/08/27 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
总结python中pass的作用
2019/02/27 Python
python模块如何查看
2020/06/16 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
视图的作用
2014/12/19 面试题
珠宝店促销方案
2014/03/21 职场文书
给校长的建议书400字
2014/05/15 职场文书
标准版离职证明书
2014/09/12 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
贷款承诺书
2015/01/20 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
行政处罚听证告知书
2015/07/01 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js