@gulibs/wx-f2组件

解决@antv/wx-f2不能平移的问题

简介

• 支持@antv/f2功能
• 解决@antv/wx-f2不能平移的问题

使用

安装依赖：

npm install @gulibs/wx-f2

1.打开json文件，引入组件

{
  "usingComponents": {
    "f2": "@gulibs/wx-f2"
  }
}

2.wxml 使用组件

<view class="container">
  <f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>

3.wxss 设置宽高

.f2-chart {
  width: 100%;
  height: 500rpx;
}

4.实例化图表

Page({
  data: {
    onInitChart: null
  },
  onLoad: function () {
    let that = this;
    wx.request({
      url: 'https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json',
      success(res) {
        const data = res.data
        that.setData({
          onInitChart: (F2, config) => that.renderChart(F2, config, data)
        });
      }
    })
  },
  renderChart(F2, config, data) {
    const chart = new F2.Chart(config);
    chart.source(data, {
      release: {
        min: 1990,
        max: 2010
      }
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: '#1890FF',
        padding: [3, 5]
      },
      nameStyle: {
        fill: '#fff'
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
      }
    });
    chart.line().position('release*count');
    chart.point().position('release*count').style({
      lineWidth: 1,
      stroke: '#fff'
    });

    chart.interaction('pan');
    // 定义进度条
    chart.scrollBar({
      mode: 'x',
      xStyle: {
        offsetY: -5
      }
    });

    // 绘制 tag
    chart.guide().tag({
      position: [1969, 1344],
      withPoint: false,
      content: '1,344',
      limitInPlot: true,
      offsetX: 5,
      direct: 'cr'
    });
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }

});