釘釘小程序中使用F2圖表繪制條形圖

預覽：

要求：

1. 橫向柱狀圖（條形圖）；
2. 數據最大的柱狀圖用橙色（#ff6600），數據最小的柱狀圖用綠色（#33CC00），中間的數據的柱狀圖用藍色（#1890ff）；
3. 柱狀圖顏色漸變，左淺右深；
4. y軸的當前月份加粗，字號加大，不足10月的在月份前加0；
5. 柱狀圖頂部顯示數據大小；
6. 圖例顯示最大數據和最低數據的顏色。

npm下載F2圖表：

npm install @antv/my-f2

頁面部分：

<!-- 使用F2圖表，onInit方法是構建函數，這個是預覽圖2的 -->
<f2 onInit="onDrawTechnicalChart"></f2>      

JS部分：

  // 引入F2
  import F2 from "@antv/my-f2";      

  onDrawTechnicalChart(F2, config) {
    // 圖表邊距 自己調合適的
    config.padding = [20,30,35,45];  

    // 1. 創建新圖表    
    const daily = new F2.Chart(config);
    // data為接口傳來的數據，格式大概為[{month: '8月', value: 2}, {month: '7月', value: 1}]等
    const data = this.data.technicalData.allNum;

    // 2. 掛載數據 
    daily.source(data);
    // 獲取當前月份,，實現要求4
    let nowDate = new Date();
    let nowMonth = nowDate.getMonth() + 1;
    if(parseInt(nowMonth) < 10) {
      nowMonth = "0" + nowMonth;      // 給小於10的月份前面加0,滿足顯示要求
    }

    // 3. 設置柱狀圖圖形方向
    // 柱形圖 transposed: false; 條形圖 transposed: true;
    daily.coord({
      transposed: true
    });

    // 實現要求1、3
    // 4.（1）配置圖形形狀 interval: 柱狀圖; 其他的圖的標識請去F2官網查詢
    // 4.（2）配置圖形顏色 color l(180): 旋轉   0: 頂部顏色 1: 底部顏色
    // 4.（3）position('y軸*x軸')
    daily.interval().position('month*number').color('l(180) 0:#1890ff 1:#fff');

    // 5. 配置坐標軸
    // 配置month軸
    daily.axis("month", {
      line: {
        lineWidth: 1,
        stroke: '#ccc',
        top: true
      },
      label: (text, index, total) => {      // 配置month軸的顯示
        if (text == nowMonth + "月") {      // 如果是當前月份，字體加粗變大
          return {
            stroke: '#0099ff',
            fontWeight: 'bold',
            fontSize: 14
          }
        }
        return {                            // 如果不是當前月份，字體正常
          stroke: '#0099ff',
          fontWeight: 'normal'
        }
      }
    })

    // 配置number軸
    daily.axis("number", {
      line: {
        lineWidth: 1,
        stroke: '#ccc',
        top: true
      },
      label: {
        stroke: '#0099ff',
      },
      grid: {
        top: true,
        lineDash: [5],
        lineWidth: 1
      }
    })

    // 實現要求2，找到最大最小的月份修改柱形圖顏色
    // 單獨改變某柱形條顏色
    let minNum = data[0].number;
    let maxNum = data[0].number;
    // 找到max數量和min數量
    for (var i = 1; i < data.length; i++) {
      if (data[i].number < minNum) {
        minNum = data[i].number;
      }
    }
    for (var i = 1; i < data.length; i++) {
      if (data[i].number > maxNum) {
        maxNum = data[i].number;
      }
    }
    daily.interval().position('month*number').color('month*number', (month, number) => {
      // 當數據大於2個月時 
      if (data.length >= 2) {
        if (number == minNum) {
          return 'l(180) 0:#33CC00 1:#fff'
        }
        if (number == maxNum) {
          return 'l(180) 0:#ff6600 1:#fff'
        }
      }
      return 'l(180) 0:#1890ff 1:#fff'
    })

    // 6. 配置tooltip
    daily.tooltip(false);

    // 7. 配置legend
    daily.legend({
      custom: true,
      position: 'top',
      align: 'right',
      itemWidth: 35,
      items: [
        { name: '最高', fill: '#ff6600', marker: 'square' },
        { name: '最低', fill: '#33CC00', marker: 'square' }
      ]
    });
    daily.render();
    // 8. 繪制文本
    const offset = 5;
    const canvas = daily.get('canvas');
    const group = canvas.addGroup();
    const shapes = {};
    data.forEach(item => {
      const point = daily.getPosition(item);
      const text = group.addShape('text', {
        attrs: {
          x: point.x + offset,
          y: point.y,
          text: item.number,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: '#0099ff',
          fontSize: 16
        }
      });
      shapes[item.month] = text; // 緩存該 shape, 便於后續查找
    });
    return daily;
  },