Name: wx-f2
Owner: AntV team
Description: F2 ????????
Created: 2018-04-12 09:30:12.0
Updated: 2018-05-22 05:50:44.0
Pushed: 2018-05-07 02:45:42.0
Homepage: null
Size: 230
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
F2 ????????????? F2 ?????????????
?????? echarts-for-weixin ???????????????? /f2-canvas
????
??????????????????: ?????
??????????
f2-canvas // f2-canvas ??
??? f2-canvas.js
??? f2-canvas.json
??? f2-canvas.wxml
??? f2-canvas.wxss
??? lib // f2-canvas ???????
??? EventEmitter.min.js // ???????????????? 3.1K
??? f2.js // f2 ???????155K
??? renderer.js // f2 ?????????????? context ????? Canvas
pages // f2-canvas ??????
??????????????? npm install ????????????????????? /f2-canvas
?????????????????
??
/f2-canvas/lib/
???? f2.js ????????????? F2 ?????????????????????????? F2 ?????????
????????? f2-canvas
?????????????????????????????????????????????? ?????
?????????
STEP 1?? pages ????? column ?????????????????
index.js
index.json
index.wxml
index.wxss
??????????
index.json
??????? f2-canvas ?????????????????????????????????????????? ff-canvas
ndex.json
ngComponents": {
f-canvas": "../../../f2-canvas/f2-canvas"
index.wxml
????? ff-canvas ????? opts
?????? index.js ??????????????????????????????????? index.js ?????
index.wxml-->
w class="container">
canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
ew>
index.js
???????????? F2 ???????????????????
ndex.js
rt F2 from '../../../f2-canvas/lib/f2';
chart = null;
tion initChart(canvas, width, height) { // ?? F2 ????
t data = [
year: '1951 ?', sales: 38 },
year: '1952 ?', sales: 52 },
year: '1956 ?', sales: 61 },
year: '1957 ?', sales: 145 },
year: '1958 ?', sales: 48 },
year: '1959 ?', sales: 38 },
year: '1960 ?', sales: 38 },
year: '1962 ?', sales: 38 },
t = new F2.Chart({
: canvas,
dth,
ight
t.source(data, {
les: {
tickCount: 5
t.tooltip({
owItemMarker: false,
Show(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
t.interval().position('year*sales');
t.render();
rn chart;
({
: {
ts: {
onInit: initChart
ady() {
?? f2-canvas ???????????????? html5 canvas ???????????? F2 ??????????? F2 ????????????????????????????? F2 ????????
????????? demos????? AntV F2?
?????????? chart ???????? 'el' ?????????? this.data.opts.onInit
?????? canvas
???????????? width
, height
?????????????
t = new F2.Chart({
canvas,
h,
ht
?????????? document??? Guide.Html ???????????????? F2 ????????
???????????????????? issues ???????? bug ?????