Echarts 绘制甘地图（非重叠方式）

最新推荐文章于 2024-05-05 21:19:47 发布

huahuohui

最新推荐文章于 2024-05-05 21:19:47 发布

阅读量1.2k

点赞数

文章标签： js echarts 数据分析

本文链接：https://blog.csdn.net/huahuohui/article/details/118387888

版权

如果仅仅是为了将图画出来的话，其实可以使用一种条形图覆盖的方式来绘制

比如：总共的时间段为 0h ~ 24h，实际数据的时间段为 4h ~ 8h。

那么就可以绘制一条有颜色的时间段（0h ~ 8h），然后再绘制一条无颜色的时间段（0h ~ 4h），将无颜色时间段覆盖在有颜色时间段上，完成甘地图的绘制。

讲真，这方法有点傻傻的，使用起来灵活度也较低，下面就介绍一种使用自定义图表类型来绘制（custom）甘地图的方法：

参考官网的示例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./echarts_4.7.0.js"></script>
  <style>
    .classroomStyle {
      width: 1000px;
      height: 600px
    }
  </style>
</head>
<body>
<div id="classroomId" class="classroomStyle"></div>

<script type="text/javascript">
  window.onload = function() {
    let myChart = echarts.init(document.getElementById('classroomId'), "light");
    let option;

    let data = []; // 容纳数据的容器变量
    let dataCount = 5;  // 每一条【记录】的【数据数量】
    let startTime = 0; // 开始的坐标
    let categories = ['教室1', '教室2']; // 记录列表

    /**
     * 根据纪录列表的数量 & 每一条记录的数据数量，生成随机数据
     */
    categories.forEach(function (category, index) {
      let colorFlag = true;
      let baseTime = startTime;
      let otherMessage;
      let dataName;
      for (let i = 0; i < dataCount; i++) {
        let duration = 2;
        let colorSet;

        /**
         * 标志位为 true ，那么就说明这段有记录， 要设定如下内容
         1. 图形颜色（非透明）
         2. name: 该条数据的名称
         3. 和绘制无关的其它数据信息
         */
        if(colorFlag){
          colorFlag = false;
          dataName = "该段有记录",
            colorSet = "#dc77dc";     // 图形颜色
          otherMessage = [1, 2, 3, 4, 5]; // 和绘制无关的其它数据信息

          /**
           * 标志位为 false ， 那么说明这段无记录，要设定如下内容
           * 1. 图形颜色（透明）（"rgb(0,0,0,0)"）
           * 2. name: "None"
           */
        } else {
          colorFlag = true;
          dataName = "该段无记录",
            colorSet = "rgb(0,0,0,0)";  // 图形颜色： 透明
        }
        // 插入数据
        data.push(
          {
            name: dataName,
            value: [
              index,                  // 编号
              baseTime,               // 开始时间
              baseTime += duration,   // 终了时间
              duration,               // 经过时间
              otherMessage,           // （...） 格式为json 的所有其他信息
              colorFlag
            ],
            itemStyle: {                // 图形样式（也可以在 series 中设定）
              normal: {
                color: colorSet
              }
            }
          }
        );
      }
    });

    // option 定义
    option = {
      tooltip: {
        formatter: function (params) {
          if(!params.value[5]){
            return params.marker + params.name + ': ' + params.value[3] + ' h' + params.value[4][2]; // 鼠标划过时显示的信息
          } else {
            return null;
          }
        }
      },
      title: {
        text: 'Profile',
        left: 'center'
      },
      /**
       * 图形的滑块设定（放大、缩小）
       */
      dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 400,
        labelFormatter: ''
      }, {
        type: 'inside',
        filterMode: 'weakFilter'
      }],
      grid: {
        height: 300
      },
      /**
       * X 轴相关信息
       */
      xAxis: {
        min: startTime,
        scale: true,
        axisLabel: {
          formatter: function (val) {
            return Math.max(0, val - startTime) + ' 时';
          }
        }
      },
      /**
       * Y 轴相关信息
       */
      yAxis: {
        data: categories
      },
      /**
       * 图样绘制
       */
      series: [{
        type: 'custom', // 图的种类： custom 为自定义图形
        /**
         * 绘制甘地图
         *  这里由于是要绘制矩形，因此需要有四个值：
         *    index : data 的编号
         *    start : x 轴起点
         *    end  : x 轴终点
         *    height: 矩形高度
         */
        // data中的每个数据项都会调用 renderItem 函数
        renderItem: function(params, api) {
          let categoryIndex = api.value(0);
          let start = api.coord([api.value(1), categoryIndex]);
          let end = api.coord([api.value(2), categoryIndex]);
          let height = api.size([0, 1])[1] * 0.6;

          // 返回
          return {
            type: 'rect',
            transition: ['shape'],
            // 根据data 之中的参数绘制形状 ： shape
            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()
          };
        },
        itemStyle: {
          opacity: 0.8
        },
        encode: {
          x: [1, 2],
          y: 0
        },
        data: data
      }]
    };
    myChart.setOption(option);
  }
</script>
</body>
</html>

完成效果：

P.S：实际需求就是要每段时间段都是2小时的，如果有别的需求也可以调整传入的data的value。

huahuohui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts 绘制甘地图（非重叠方式）

如果仅仅是为了将图画出来的话，其实可以使用一种条形图覆盖的方式来绘制比如：总共的时间段为 0h ~ 24h，实际数据的时间段为 4h ~ 8h。那么就可以绘制一条有颜色的时间段（0h ~ 8h），然后再绘制一条无颜色的时间段（0h ~ 4h），将无颜色时间段覆盖在有颜色时间段上，完成甘地图的绘制。讲真，这方法有点傻傻的，使用起来灵活度也较低，下面就介绍一种使用自定义图表类型来绘制（custom）甘地图的方法：参考官网的示例：代码：<!D...
复制链接

扫一扫