background

Made a small bookkeeping program, need to use the chart, the micro channel small program on some chart library. Let me give you a personal feeling.

ECharts

The official description is pretty comprehensive

But this ECharts thing has always been a big thing, untried

Antv

Ali out of things, experience the Demo effect is quite good, the Demo is as follows

wx-chart

Seems like it’s been a long time since anyone maintained it

ucharts

Experience small program open is advertising, a little annoying

Access to the

Install dependencies

Go to the project root directory and run the following command

Echo {"dependencies": {}} > package.json NPM install @antv/wx-f2 --save {"@antv/wx-f2": "^2.1.1"}}Copy the code

Build the NPM

As shown below: Choose details > Local Settings > Use NPM module > Debug Base 2.9.2+

Finally, click on the menu bar of developer Tools: Tools –> “Build NPM”

Use custom components

1. Import components in the JSON file of Page

{
  "usingComponents": {
    "f2": "@antv/wx-f2"
  }
}
Copy the code

2. WXML uses components

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

3. Set WXSS width and height

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

4. Instantiate the chart

Page({ data: { onInitChart(F2, config) { const chart = new F2.Chart(config); Const data = [{value: 63.4, city: 'New York', date: '2011-10-01'}, {value: 62.7, city: 'Alaska', date: '2011-10-01'}, {value: 72.2, city: 'Austin', date: '2011-10-01'}, {value: 58, city: 'New York', date: '2011-10-02'}, {value: 59.9, city: 'Alaska', date: '2011-10-02'}, {value: 67.7, city: 'Austin', date: '2011-10-02'}, {value: 53.3, city: 'New York', date: '2011-10-03'}, {value: 59.1, city: 'Alaska', date: '2011-10-03'}, {value: 69.4, city: 'Austin, date:' 2011-10-03 '},]; chart.source(data, { date: { range: [0, 1], type: 'timeCat', mask: 'MM-DD' }, value: { max: 300, tickCount: 4 } }); chart.area().position('date*value').color('city').adjust('stack'); chart.line().position('date*value').color('city').adjust('stack'); chart.render(); // note: we need to display chart return; }}});Copy the code

5. Preview the effect

QA

1, Cannot create property ‘dependencies’ on string ‘{}

D:\workspace\xxxx>npm install @antv/wx-f2 --save
npm ERR! Cannot create property 'dependencies' on string '{}'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxx\_logs\2021-01-27T07_33_54_115Z-debug.log
Copy the code

Solution: Create package.json using the following command

echo {"dependencies": {} } > package.json
Copy the code

2, Cannot read property ‘getContext’ of undefined

Solution: The project base debug library is set to 2.9.2+

reference

Github:github.com/antvis/wx-f…

Use documentation: here