使用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 相关文章推荐
jquery解析xml字符串示例分享
Mar 25 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
vue计算属性及使用详解
Apr 02 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
node创建Vue项目步骤详解
Mar 06 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检测useragent版本示例
2014/03/24 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
js的一些常用方法小结
2011/06/29 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
jquery animate动画持续运动的实例
2017/11/29 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python实现大文本文件分割
2019/07/22 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python数组并集交集补集代码实例
2020/02/18 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
介绍信怎么写
2015/05/05 职场文书
学历证明范文
2015/06/16 职场文书
休学证明范本
2015/06/19 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
mysql 获取时间方式
2022/03/20 MySQL