F2 WeChat tiểu trình tự

F2 WeChat tiểu trình tự phiên bản, duy trì nguyên sinhF2Sở hữu công năng, hoan nghênh sử dụng phản hồi.

Nhanh chóng thể nghiệm

• WeChat quét mã thể nghiệm

• Sử dụng WeChat khai phá giả công cụ mở ra này hạng

Thuyết minh

Vì phương tiện sử dụng, chúng ta phong trang WeChat tiểu trình tự tự định nghĩa lắp ráp, cố yêu cầu WeChat tiểu trình tự duy trì sử dụng npm trang bị đệ tam bao.
Quan trọng: Phiên bản yêu cầu

1. Tiểu trình tự cơ sở kho phiên bản 2.7.0 hoặc trở lên
2. Khai phá giả công cụ 1.02.1808300 hoặc trở lên bắt đầu, tiểu trình tự duy trì sử dụng npm trang bị kẻ thứ ba bao.

Như thế nào sử dụng

1. Trang bị ỷ lại

Hạng mục cam chịu khởi động lại ra tới chính là không cópackage.json,Yêu cầu tân tăngpackage.jsonSau lại trang bị

## không có package.json khi chấp hành phía dưới này đoạn
## echo "{}" > package.json

npm install @antv/wx-f2 --save

Trang bị hảo ỷ lại bao lúc sau, điểm đánh công cụ đỉnh chóp thanh menu tình hình cụ thể và tỉ mỉ:

Câu tuyển “Sử dụng npm mô khối” lựa chọn:

Cuối cùng điểm đánh khai phá giả công cụ trung thanh menu: Công cụ --> xây dựng npm có thể vận hành.

Nếu đụng tới@babel/runtime không tìm được npm bao nhập khẩu văn kiện,Trực tiếp xem nhẹ là được, không ảnh hưởng sử dụng ( cưỡng bách chứng chướng mắt nói, tay động xóa bỏnode_modules/@babel/runtimeMục lục )

rm -rf node_modules/@babel/runtime

2. Sử dụng tự định nghĩa lắp ráp

1. Mở ra json văn kiện, dẫn vào lắp ráp

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

2. wxml sử dụng lắp ráp

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

3. wxss thiết trí khoan cao

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

4. Ví dụ thực tế hóa biểu đồ

Page({
data:{
onInitChart(F2,config){
constchart=newF2.Chart(config);
constdata=[
{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();
// chú ý: Yêu cầu đem chart return ra tới
returnchart;
}
},
});

API

• F2 API tham kiến:https://f2.antv.vision/zh/docs/api/f2

Như thế nào cống hiến

Nếu ngài ở sử dụng trong quá trình đụng tới vấn đề, có thể trước thông quaissuesNhìn xem có hay không cùng loại bug hoặc là kiến nghị.

License

MIT license