使用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 学习 - 提高篇
Feb 02 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python计算一个序列的平均值的方法
2015/07/11 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python实现最大优先队列
2019/08/29 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
教师简历自我评价
2014/02/03 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
学雷锋标语
2014/06/25 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
新党章的学习心得体会
2014/11/07 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书