收藏
回答

antv-f2 图表开发工具正常显示数据,小程序不显示数据?

antv-f2 图表开发工具正常显示数据,小程序不显示数据?

data: {
  onInitChart(F2, config) {
      drawChart(F2, config)
    }
};

function drawChart(F2, config) {
  const chart = new F2.Chart(config);
  const data = [{
    name: '销售金额',
    date: '07/14',
    value: 18.9
  }, {
    name: '销售金额',
    date: '07/15',
    value: 28.8
  }, {
    name: '销售金额',
    date: '07/16',
    value: 39.3
  }, {
    name: '销售金额',
    date: '07/17',
    value: 81.4
  }, {
    name: '销售金额',
    date: '07/18',
    value: 47
  }, {
    name: '销售金额',
    date: '07/19',
    value: 20.3
  }, {
    name: '销售金额',
    date: '07/20',
    value: 24
  }, {
    name: '销售金额',
    date: '07/21',
    value: 35.6
  }, {
    name: '销售数量',
    date: '07/14',
    value: 12
  }, {
    name: '销售数量',
    date: '07/15',
    value: 23
  }, {
    name: '销售数量',
    date: '07/16',
    value: 34
  }, {
    name: '销售数量',
    date: '07/17',
    value: 99
  }, {
    name: '销售数量',
    date: '07/18',
    value: 52
  }, {
    name: '销售数量',
    date: '07/19',
    value: 35
  }, {
    name: '销售数量',
    date: '07/20',
    value: 37
  }, {
    name: '销售数量',
    date: '07/21',
    value: 42
  }];
  chart.source(data, {
    date: {
      // range: [0, 1],
      type: 'timeCat',
      mask: 'MM/DD'
    },
    value: {
      min: 0,
      // tickCount: 4
    }
  });
  chart.interval()
    .position([ 'date', 'value' ])
    .color('name')
    .adjust({
      type: 'dodge',
      marginRatio: 0.09 // 设置分组间柱子的间距
    });
  chart.render();
  // 注意:需要把chart return 出来
  return chart;
}


开发工具可以正常显示,手机预览就不显示

回答关注问题邀请回答
收藏

1 个回答

  • 黄卉
    黄卉
    2022-12-01

    容器外面需要加个with和height

    2022-12-01
    有用 2
    回复 1
    • Qiu (吉²)
      Qiu (吉²)
      2022-12-01
      谢谢
      2022-12-01
      回复
登录 后发表内容