• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

钉钉小程序中使用F2图表绘制条形图

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

预览:

要求:

  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;
  },

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap