钉钉小程序使用F2绘制对比折线图，以及处理重复数据

效果：

踩过无数坑之后，终于实现了这个效果，直接上代码吧。

  arrayUnqiue(arr, name) { // 传入参数 数组， 对象的名称(即对象数组里的属性)
    let hash = {}
    return arr.reduce((item, next) => {
      // eslint-disable-next-line
      hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
      return item
    }, [])
  },
onInitChart1(F2, config) {
    //处理数据
    let a = this.data.biologyList
    let arr = this.arrayUnqiue(a,'swTimeDate')
    const data = [];
    for (let i = 0; i < arr.length; i++) {
      let qx = Number(arr[i].qxValue)
      let obj = {
        value: qx,
        type: '情绪值',
        date: arr[i].swTimeDate
      }
      data.push(obj)
      let tl = Number(arr[i].tlValue)
      let obj1 = {
        value: tl,
        type: '体力值',
        date: arr[i].swTimeDate
      }
      data.push(obj1)
      let zl = Number(arr[i].zlValue)
      let obj2 = {
        value: zl,
        type: '智力值',
        date: arr[i].swTimeDate
      }
      data.push(obj2)
    }
    //生成折线图
    const chart = new F2.Chart(config);
    chart.source(data);
    chart.scale('date', {
      type: 'timeCat',
      tickCount: 3
    });
    chart.scale('value', {
      tickCount: 5
    });
    chart.axis('date', {
      label: function label(text, index, total) {
        // 只显示每一年的第一天
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    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 = {};
        legendItems.forEach(function (item) {
          map[item.name] = _.clone(item);
        });
        tooltipItems.forEach(function (item) {
          const name = item.name;
          const value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(_.values(map));
      },
      onHide: function onHide() {
        const legend = chart.get('legendController').legends.top[0];
        legend.setItems(chart.getLegendItems().country);
      }
    });
    chart.line().position('date*value').color('type');
    chart.render();
  },

<view class="f2-chart" a:if={{bloodList[0].cityNo}}>
  <f2 onInit="onInitChart" onInit="{{onInitChart}}" class="container" style="height: 300px;"></f2>
    <view style="margin-top:10rpx">
    血压折线图
  </view>
</view>