使用ECharts實現(xiàn)狀態(tài)區(qū)間圖

更新時間：2018年10月25日 10:50:26 作者：Orange_J

這篇文章主要為大家詳細介紹了使用ECharts實現(xiàn)狀態(tài)區(qū)間圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下

需求背景

假如有如下圖所示的圖表需要顯示多個網(wǎng)口在一段時間內(nèi)的多個狀態(tài)：y軸用于展示各網(wǎng)口，x軸用于展示時間(分鐘)，使用條形圖的不同顏色來表示不同時間區(qū)間段的狀態(tài)，使用深藍、淺藍、橙色、紅色分別代表正常、繁忙、故障、離線四種狀態(tài)。以WAN0為例，圖中則表示了0~10分鐘為正常，10~25分鐘為繁忙，25~45分鐘為故障，45~60分鐘為離線。

根據(jù)此圖，很容易想到可以用條形圖試試。但后來發(fā)現(xiàn)，如果用堆疊條形圖，則每種狀態(tài)在每一個網(wǎng)口對應的圖形中只能出現(xiàn)一次，這不能實現(xiàn)需求。于是繼續(xù)查閱echart官網(wǎng)示例，終于在自定義類型圖表中找到了一個相似的示例，地址

通過研究示例代碼并進行一番改造，終于實現(xiàn)了上述需求。

在實現(xiàn)的過程中遇到了一個小問題，那就是使用自定義圖表實現(xiàn)chart之后，圖例不好處理。通過查看條形圖的示例，找到了一種顯示圖例的方法，那就是使用空的條形圖來顯示圖例，因為在series里面配置了條形圖并配置name后，echart會自動根據(jù)name的值去legend的配置中匹配對應的圖例名字并顯示。

完整代碼如下，保存于本地之后再自己去echart官網(wǎng)下載庫文件（完整版）之后即可運行：

<!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'));

    // 各狀態(tài)的顏色
    var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531'];

    // 四種狀態(tài)
    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字段里數(shù)據(jù)項:

{
  itemStyle: { normal: { color: colors[0] } },
  name: '正常',
  value: [0, 0, 10]
}

itemStyle: 所渲染的矩形的樣式
name: 該矩形的狀態(tài)名
value: 第0項代表類別標識，例如0就代表WAN0的，1就是WAN1的；第1和第2項代表該矩形區(qū)域?qū)膞坐標范圍開始于0，結(jié)束于1。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript中的類(Class)詳細介紹
這篇文章主要介紹了JavaScript中的類(Class)詳細介紹,本文講解了JavaScript中類的定義、JavaScript中的Constructor(構(gòu)造函數(shù))、類名等內(nèi)容,需要的朋友可以參考下
2014-12-12
解決bootstrap導航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細介紹了解決bootstrap導航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下
2016-07-07
hash和history路由模式區(qū)別示例解析
這篇文章主要為大家介紹了hash和history路由模式區(qū)別示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
JavaScript懶加載與預加載原理與實現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-09-09
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下
2014-06-06
比較JavaScript對象的四種方式
這篇文章主要介紹了比較 JavaScript 對象的四種方式，對js對象感興趣的同學，可以參考下
2021-04-04
js日期格式化yyyy-MM-dd問題
這篇文章主要介紹了js日期格式化yyyy-MM-dd問題，具有很好的參考價值，希望對大家大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
javascript腳本調(diào)試方法小結(jié)
相信大家試過編寫javascript腳本時發(fā)生這樣或那樣的錯誤，但是js并沒有很好的調(diào)試方法，在這里介紹兩個方法。
2008-11-11
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡單講述了廣義表的原理與相關概念,并結(jié)合實例形式分析了javascript定義與使用廣義表的相關操作技巧,需要的朋友可以參考下
2017-04-04