jw-f2 v1.0.3

jw-f2

a light chart component based on native @antv/f2 for wechat-miniprogram >> Github

Install

1. Install package: npm install jw-f2
2. Build package:

   • tick detials -> Use NPM module
   • build npm: tools -> build npm

Attributes

Events

Usage

Use as a custom component

BasicRadarChart component 1. index.js

Component({
  properties: {
    chartData: {
      type: Object,
      value: {}
    }
  },
  data: {
    chartId: '__jw-basic-radar'
  },
  methods: {
    renderChart(e) {
      const {F2, config, that} = e.detail;
      if(!F2 || !config || !that) return;
      const chart = new F2.Chart(config);
      chart.coord('polar');
      chart.source(this.properties.chartData, {
        score: {
          min: 0,
          max: 5,
          nice: false,
          tickInterval: 1
        }
      });
      chart.axis('score', {
        label: false,
        line: null,
        tickLine: null,
        grid: {
          stroke: '#999',
          line: {
            style: {
              lineDash: null
            }
          }
        }
      });
      chart.axis('stack', {
        line: null,
        tickLine: null,
        grid: {
          lineDash: null,
          stroke: '#999'
        }
      });
      chart.line().position('stack*score').color('type').size(2);;
      chart.point().position('stack*score').color('type').size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      chart.render();
      that.chart = chart;
      that.canvasEl = chart.get('el');
    }
  }
})

2. index.json

{
  "component": true,
  "usingComponents": {
    "jw-f2": "jw-f2"
  }
}

3. index.wxml

<view class="chart-container">
  <jw-f2 bindonRender="renderChart" id="{{chartId}}"/>
</view>

4. index.wxss

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

Use in a page

BasicRadarChart in a page 1. index.js

Page({
  data: {
    chartId: '__jw-basic-radar',
    chartData: []
  },
  ... //get your chart data
  methods: {
    renderChart(e) {
      const {F2, config, that} = e.detail;
      if(!F2 || !config || !that) return;
      const chart = new F2.Chart(config);
      chart.coord('polar');
      chart.source(this.properties.chartData, {
        score: {
          min: 0,
          max: 5,
          nice: false,
          tickInterval: 1
        }
      });
      chart.axis('score', {
        label: false,
        line: null,
        tickLine: null,
        grid: {
          stroke: '#999',
          line: {
            style: {
              lineDash: null
            }
          }
        }
      });
      chart.axis('stack', {
        line: null,
        tickLine: null,
        grid: {
          lineDash: null,
          stroke: '#999'
        }
      });
      chart.line().position('stack*score').color('type').size(2);;
      chart.point().position('stack*score').color('type').size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      chart.render();
      that.chart = chart;
      that.canvasEl = chart.get('el');
    }
  }
})

2. index.json

{
  "usingComponents": {
    "jw-f2": "jw-f2"
  }
}

3. index.wxml

<view class="chart-container">
  <jw-f2 bindonRender="renderChart" id="{{chartId}}"/>
</view>

4. index.wxss

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

A list of examples >> jw-f2-examples

Support this project

• Buy me a coffee