亲宝软件园·资讯

展开

antv完成区间柱形图一列多柱配置实现详解

code_Bo 人气:0

使用antv 配置区间柱形图

需求: 来源与产品的一个想法,想在 X 轴 每一行输出多个区间柱形,以时间为分段,X轴 底线显示时间, 找了一下 echarts 的实现, 可以使用配置函数的方式 实现,但只实现了一行,而且函数的配置项其API 文档也晦涩难懂, 最后使用 antv 的 区间柱形图来实现, 但是 antv 无法像 echarts 一样配置每一个柱形的颜色, 因为他的 color 配置回调函数只接受一个 type 字符串类型, 最后使用了数组队列匹配的方式来实现

使用的是 antv 的 g2plot 官方分组柱形图效果如下: 定位链接: g2plot.antv.vision/zh/examples…

实现之后的效果

分享思路

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .root {
      padding: 50px;
      width: 1600px;
      height: 500px;
    }
  </style>
  <body>
    <div id="container" class="root"></div>
  </body>
</html>

js文件

 <script
    type="text/javascript"
    src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"
  ></script>

引入了 g2 以后

上面引入了 g2 以后 , 我们开始分享业务逻辑, 里面包含一些功能函数, 会拆开 首先是功能函数, 会在 我们的业务当中使用到的

// 时间处理
// 小时转分钟
function ChangeStrToMinutes(str) {
  var arrminutes = str.split(":");
  if (arrminutes.length == 2) {
    var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
    return minutes;
  } else {
    return 0;
  }
}
// 分钟转小时
function ChangeHourMinutestr(str) {
  if (str !== "0" && str !== "" && str !== null) {
    return (
      (Math.floor(str / 60).toString().length < 2
        ? "0" + Math.floor(str / 60).toString()
        : Math.floor(str / 60).toString()) +
      ":" +
      ((str % 60).toString().length < 2
        ? "0" + (str % 60).toString()
        : (str % 60).toString())
    );
  } else {
    return "";
  }
}
// 样式处理
const setStyles = (container, styles) => {
  for (const key in styles) {
    container.style[key] = styles[key];
  }
};
// 动态设置画布高度
function setHeigh(data, name, height = 100) {
  const dom = document.getElementsByClassName(name)[0];
  const count = data.length;
  dom.style["height"] = count * height + "px";
}

业务逻辑处理

注意点:

const { Bar } = G2Plot;
// 假数据
var busDataInfo = [
  {
    module: "BJ6123C7BTD",
    line: "8",
    wayLine: [
      {
        time: ["05:50", "06:30"],
        way: "E",
      },
      {
        time: ["06:42", "08:32"],
        way: "S",
      },
      {
        time: ["08:46", "10:39"],
        way: "E",
      },
      {
        time: ["14:06", "15:46"],
        way: "S",
      },
    ],
  },
  {
    module: "BJ6123C7BTD",
    line: "7",
    wayLine: [
      {
        time: ["05:00", "06:30"],
        way: "S",
      },
      {
        time: ["06:42", "08:32"],
        way: "E",
      },
      {
        time: ["08:46", "10:39"],
        way: "S",
      },
      {
        time: ["14:06", "15:46"],
        way: "E",
      },
    ],
  },
  {
    module: "BJ6123C7BTD",
    line: "6",
    wayLine: [
      {
        time: ["05:00", "06:00"],
        way: "S",
      },
      {
        time: ["06:12", "08:42"],
        way: "E",
      },
      {
        time: ["08:46", "09:09"],
        way: "S",
      },
      {
        time: ["14:06", "15:46"],
        way: "E",
      },
      {
        time: ["16:10", "18:00"],
        way: "S",
      },
      {
        time: ["18:34", "20:07"],
        way: "E",
      },
    ],
  },
];
// 数据改造 将上面的数据改造成我需要的数组格式
function changeData(data) {
  const outPutData = [];
  data.forEach((item) => {
    item.wayLine.forEach((every) => {
      outPutData.push({
        type: item.line,
        module: item.module,
        way: every.way,
        values: [
          ChangeStrToMinutes(every.time[0]),
          ChangeStrToMinutes(every.time[1]),
        ],
      });
    });
  });
  //TODO 这里是为了解决 颜色 处理部分循环进入两次的问题, 这里写在 上面的数据处理之前和之后 会有分别,分别在于 后面是否使用 reverse 反转数组
  outPutData.push({});
  return outPutData;
}
// 样式
const divStyles = {
  position: "absolute",
  background: "rgba(255,255,255,0.95)",
  boxShadow: "rgb(174, 174, 174) 0px 0px 10px",
  borderRadius: "4px",
  padding: "10px",
};
// 画布高度设置, 是根据数组数据长度,挂载点,以及高度 三个参数来进行设置
setHeigh(busDataInfo, "root", 60);
const data = changeData(busDataInfo);
// 画布实例化
const barPlot = new Bar("container", {
  barWidthRatio: 0.7, // 条形图宽度占比
  data: data,
  xField: "values",
  yField: "type",
  colorField: "type", // 部分图表使用 seriesField
  color: ((arg) => {
    var count = 0;
    var arr = [];
    return (arg) => {
      const { type = "" } = arg;
      if (type === "") {
        count = count + 1;
      }
      // 解决循环会进入两次的问题
      if (count !== 1) return;
      arr.push(type);
      let currentArr = data.filter((item) => item.type === type);
      let filterArr = arr.filter((item) => item === type);
      // 获取当前往返类型
      const wayType = currentArr[filterArr.length - 1]?.way;
      console.log("type", type, wayType, currentArr);
      if (wayType === "E") {
        return "#FF5CA2";
      }
      return "#6C3E00";
    };
  })(),
  xAxis: {
    // x轴文本标签配置项
    label: {
      formatter: (value) => {
        return ChangeHourMinutestr(value);
      },
    },
    // 坐标轴网格线的配置项
    grid: {
      // alignTick:false,
    },
    // 坐标轴线样式
    // line:
    // {
    //   style:
    //   {
    //     stroke: 'black',
    //     lineWidth: 1,
    //     strokeOpacity: 0.7,
    //     shadowColor: 'black',
    //     shadowBlur: 10,
    //     shadowOffsetX: 5,
    //     shadowOffsetY: 5,
    //     cursor: 'pointer'
    //   }
    // },
    // 坐标轴刻度线样式
    tickLine: {
      length: 1,
      style: (item, index, items) => {
        return {
          stroke: "black",
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: "black",
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: "pointer",
        };
      },
    },
    min: 270, // 坐标轴最小值  这里指分钟数
    tickCount: 20, // 坐标轴刻度数量 如果写了下面的刻度间隔, 则数量优先级变低
    tickInterval: 30, // 坐标轴刻度间隔
  },
  isRange: true,
  // 柱形上面的文字
  label: {
    content: "",
  },
  // barBackground: {
  //   style: {
  //     fill: '#000',
  //     fillOpacity: 0.01,
  //   }
  // },
  tooltip: {
    fields: ["type", "way", "module", "values"],
    // formatter:(data)=>{
    //   const { type,module,way,values} = data
    //   console.log('data',data);
    //   return {
    //     name:module,
    //     values:way
    //   }
    // },
    shared: false, // 只在鼠标悬浮到块上再展示
    showCrosshairs: false,
    customContent: (value, item) => {
      console.log("customContent", value, item[0]);
      if (!value || !item) return;
      const { data } = item[0];
      const container = document.createElement("div");
      setStyles(container, divStyles);
      container.innerHTML = `<div>车辆号码${data.type}</div><div>往返:${data?.way}</div>`;
      return container;
    },
  },
});
// 官方颜色主题
barPlot.update({
  theme: {
    styleSheet: {
      brandColor: "#FF4500",
      paletteQualitative10: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#B40F0F",
        "#2FB8FC",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
      ],
      paletteQualitative20: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#B40F0F",
        "#2FB8FC",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
        "#946DFF",
        "#6C3E00",
        "#6193FF",
        "#FF988E",
        "#36BCCB",
        "#004988",
        "#FFCF9D",
        "#CCDC8A",
        "#8D00A1",
        "#1CC25E",
      ],
    },
  },
});
挂载
barPlot.render();

加载全部内容

相关教程
猜你喜欢
用户评论