使用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 Array.remove() 数组删除
Aug 06 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
jQuery技巧总结
Jan 01 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript知识点整理
Dec 09 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
Vue中key的作用示例代码详解
Jun 10 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
原生js实现日期联动
2015/01/12 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
党建工作先进材料
2014/05/02 职场文书
信息管理专业自荐书
2014/06/05 职场文书
统计专业自荐书
2014/07/06 职场文书
个人委托书如何写
2014/09/25 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
MySQL注入基础练习
2021/05/30 MySQL
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle