使用ECharts实现状态区间图

更新时间：2018年10月25日 10:50:26 作者：Orange_J

这篇文章主要为大家详细介绍了使用ECharts实现状态区间图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

需求背景

假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。

根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅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 设计模式之享元模式,结合实例形式详细分析了javascript 设计模式之享元模式相关概念、原理、应用方法及操作注意事项,需要的朋友可以参考下
2020-04-04
JavaScript 解析数学表达式的过程详解
这篇文章主要介绍了JavaScript 解析数学表达式的过程详解,本文以一个的解题思路，来分享如何解决问题，解决的过程，可以作为解决工作中一般问题的通用思路，对js解析表达式相关知识感兴趣的朋友一起看看吧
2022-06-06
JavaScript 数组运用实现代码
复习一下JS中数组的运用。学习js数组的朋友可以参考下。
2010-04-04
JavaScript用JSONP跨域请求数据实例详解
Javascript跨域访问是web开发者经常遇到的问题，什么是跨域，就是一个域上加载的脚本获取或操作另一个域上的文档属性。下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
深入了解JavaScript中let/var/function的变量提升
这篇文章主要介绍了深入了解JavaScript中let/var/function的变量提升，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
这篇文章主要介绍了JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下
2016-08-08
微信小程序实现文本输入弹窗
这篇文章主要为大家详细介绍了微信小程序实现文本输入弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS 毫秒转时间示例代码
毫秒转时间的方法有很多，在本文将为大家介绍下js中是如何实现的，感兴趣的朋友可以参考下
2013-09-09
js模拟百度模糊搜索的实例
下面小编就为大家带来一篇js模拟百度模糊搜索的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
百度Popup.js弹出框进化版拖拽小框架发布兼容IE6/7/8,Firefox,Chrome
百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简，效果也很好，我们可以在很多大型网站上见到这种效果，在我的项目中也使用了该js。
2010-04-04

使用ECharts实现状态区间图

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具