Highways4Good/weapp/src/utils/chart/barChart.js

import complateF2 from './complateF2';

const F2 = complateF2();

export function barChart({ data, config = {} }) {
  return (canvas, width, height) => {
    const type = config.type ? config.type : null;
    const typeColor = config.typeColor ? config.typeColor : 'type';
    const xAxis = config.xAxis ? config.xAxis : 'kind';
    const yAxis = config.yAxis ? config.yAxis : 'value';
    const flag = config.flag ? config.flag : null;
    const padding = config.padding ? config.padding : [25, 0, 20, 0];
    const timeValue = config.timeValue || null //甘特图时间格式数据处理标识 { x: 'stageName', y: ['startTime', 'overTime'] }

    const chart = new F2.Chart({
      el: canvas,
      width,
      height,
      // padding,
    });
    const dataCfg = {};
    if (config.tickCountX) {
      dataCfg[xAxis] = {
        tickCount: config.tickCountX
      }
    }
    if (config.tickCountY) {
      dataCfg[yAxis] = {
        tickCount: config.tickCountY
      }
    }


    //柱状图90颠倒-> 甘特图
    if (config.transposed) {
      chart.coord({
        transposed: true
      });
    }

    if (!data.length) {
      chart.guide().text({
        position: ['50%', '50%'],
        content: '暂无数据',
        offsetY: -10,
        style: {
          fontSize: 12,
          textAlign: 'center',
          textBaseLine: 'middle',
        },
      });
    }
    //甘特图
    if (type === 'gantt') {
      if (timeValue) {
        /**
         * 处理时间格式
         * 1.时间格式转时间戳
         * 2.y轴lable展示处理
         * 3.tooltip时间格式
         */
        if (data.length) {
          const minData = data.filter(item => item[timeValue.y[0]]).map(item => item[timeValue.y[0]]).sort() || []
          const fistData = minData.length && new Date(minData[0]).getTime()

          data.forEach((obj) => {
            obj.x = obj[timeValue.x];
            obj.y = [obj[timeValue.y[0]] ? new Date(obj[timeValue.y[0]]).getTime() - fistData : null, obj[timeValue.y[1]] ? new Date(obj[timeValue.y[1]]).getTime() - fistData : null];
          });
          chart.axis('y', {
            label: (e, index, total) => {
              const cfg = {
                textAlign: 'center'
              };
              let time = e;
              if (index === 0) {
                time = new Date(Number(e) + Number(fistData));
                cfg.textAlign = 'start';
              } else if (index > 0 && index === total - 1) {
                time = new Date(Number(e) + Number(fistData));
                cfg.textAlign = 'end';
              } else {
                time = new Date(Number(e) + Number(fistData))
              }
              cfg.text = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
              return cfg
            }
          })
        }
      }
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          const items = ev.items;
          items[0].name = '时间';
          const value = timeValue ? [items[0].origin[timeValue.y[0]], items[0].origin[timeValue.y[1]]] : items[0].origin[yAxis];
          items[0].value = value[0] + ' 至 ' + value[1];
        }
      });
    } else if (type === 'tipShowX') {
      chart.tooltip({
        onShow: function onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].origin[xAxis];
        }
      });
    }
    chart.legend(false)
    chart.source(data, dataCfg);

    if (config.colors) {
      chart.interval().position(`${xAxis}*${yAxis}`).color(xAxis, config.colors)
    } else {
      chart.interval().position(`${xAxis}*${yAxis}`);
    }
    chart.render();
    return chart;
  };
}

//时间甘特图
export function ganttBarChart({ data, config = {} }) {
  return (canvas, width, height) => {
    const type = config.type ? config.type : null;
    const xAxis = config.xAxis ? config.xAxis : 'kind';
    const yAxis = config.yAxis ? config.yAxis : 'value';

    const chart = new F2.Chart({
      el: canvas,
      width,
      height,
      // padding,
    });
    const dataCfg = {};
    if (config.tickCountX) {
      dataCfg[xAxis] = {
        tickCount: config.tickCountX
      }
    }
    if (config.tickCountY) {
      dataCfg[yAxis] = {
        tickCount: config.tickCountY
      }
    }
    const min = Math.min([].concat.apply([], data.map(val => val[yAxis].map(t => new Date(t).getTime()))));
    console.log(min);

    data.forEach(val => {
      val[yAxis] = val[yAxis].map(t => {

      })
    })
    chart.source(data, dataCfg);

    chart.coord({
      transposed: true
    });

    chart.tooltip({
      showItemMarker: false,
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = '时间';
        const value = items[0].origin[yAxis];
        items[0].value = value[0] + ' 至 ' + value[1];
      }
    });


    if (config.colors) {
      chart.interval().position(`${xAxis}*${yAxis}`).color(xAxis, config.colors)
    } else {
      chart.interval().position(`${xAxis}*${yAxis}`);
    }
    chart.render();
    return chart;
  };
}
export function groupBarChart({ data, config = {} }) {
  // data = [{
  //     kind: '第一部',
  //     value: 38,
  //     typeColor: '2018年10月'
  // }, {
  //     kind: '第二部',
  //     value: 92,
  //     typeColor: '2018年10月'
  // }, {
  //     kind: '第一部',
  //     value: 18,
  //     typeColor: '2018年11月'
  // }, {
  //     kind: '第二部',
  //     value: 22,
  //     typeColor: '2018年11月'
  // }];
  return (canvas, width, height) => {
    const type = config.type ? config.type : null;
    const typeColor = config.typeColor ? config.typeColor : 'type';
    const xAxis = config.xAxis ? config.xAxis : 'kind';
    const yAxis = config.yAxis ? config.yAxis : 'value';
    const flag = config.flag ? config.flag : null;
    const padding = config.padding ? config.padding : [25, 0, 20, 0];

    const chart = new F2.Chart({
      el: canvas,
      width,
      height,
      padding: padding,
    });

    chart.source(data);

    let label = {};
    if (flag && flag == 'caseArea') {
      label = {
        rotate: Math.PI / 2,
        textAlign: 'start',
        textBaseline: 'middle',
      };
    }
    chart.axis(xAxis, {
      label,
    });
    chart.legend({
      offsetY: -15,
    });
    chart.tooltip({
      custom: true, // 自定义 tooltip 内容框
      onChange: function onChange(obj) {
        const legend = chart.get('legendController').legends.top[0];
        const tooltipItems = obj.items;
        const legendItems = legend.items;
        const map = [];
        for (const legendItem of legendItems) {
          legendItem.value = '0';
        }
        for (const legendItem of legendItems) {
          for (const tooltipItem of tooltipItems) {
            if (legendItem.name == tooltipItem.name) {
              legendItem.value = tooltipItem.value;
            }
          }
        }
        legend.setItems(legendItems);
      },
      onHide: function onHide() {
        const legend = chart.get('legendController').legends.top[0];
        legend.setItems(chart.getLegendItems().country);
      },
    });
    chart.interval().position(`${xAxis}*${yAxis}`).color(typeColor).adjust({
      type: 'dodge',
      marginRatio: 0.05, // 设置分组间柱子的间距
    });

    chart.render();
    return chart;
  };
}