|
@@ -1,4 +1,75 @@
|
|
|
Page({
|
|
|
data: {},
|
|
|
onLoad() {},
|
|
|
+ onInitChart(F2, config) {
|
|
|
+ // 饼状图
|
|
|
+const chart = new F2.Chart(config);
|
|
|
+ const data = [
|
|
|
+ { name: '打扫房间', proportion: 0.4, a: '1' },
|
|
|
+ { name: '打扫厨房', proportion: 0.2, a: '1' },
|
|
|
+ { name: '带孩子', proportion: 0.18, a: '1' },
|
|
|
+ { name: '照顾老人', proportion: 0.15, a: '1' },
|
|
|
+ { name: '清洁厨房', proportion: 0.05, a: '1' },
|
|
|
+ { name: '其他', proportion: 0.02, a: '1' },
|
|
|
+];
|
|
|
+
|
|
|
+chart.source(data);
|
|
|
+chart.legend({
|
|
|
+ position: 'right'
|
|
|
+});
|
|
|
+chart.coord('polar', {
|
|
|
+ transposed: true,
|
|
|
+ innerRadius: 0.7,
|
|
|
+});
|
|
|
+chart.axis(false);
|
|
|
+chart
|
|
|
+ .interval()
|
|
|
+ .position('a*proportion')
|
|
|
+ .color('name', [
|
|
|
+ '#1890FF',
|
|
|
+ '#13C2C2',
|
|
|
+ '#2FC25B',
|
|
|
+ '#FACC14',
|
|
|
+ '#F04864',
|
|
|
+ '#8543E0',
|
|
|
+ ])
|
|
|
+ .adjust('stack');
|
|
|
+
|
|
|
+chart.render();
|
|
|
+
|
|
|
+ // 注意:需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart2(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();
|
|
|
+ // 注意:需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
});
|