|
@@ -1,6 +1,15 @@
|
|
|
+// const F2 = require('@antv/f2/lib/index-all');
|
|
|
+// import F2 from "@antv/f2/lib/index-all"
|
|
|
Page({
|
|
|
- data: {},
|
|
|
- onLoad() {},
|
|
|
+ data: {
|
|
|
+ reportDate:'2020年11月',
|
|
|
+ servantName:'王阿姨',
|
|
|
+ serviceDay:'28',
|
|
|
+ percentTop:'88%'
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
onInitChart(F2, config) {
|
|
|
// 饼状图
|
|
|
const chart = new F2.Chart(config);
|
|
@@ -40,6 +49,70 @@ chart.render();
|
|
|
// 注意:需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
+ onInitChart1(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.5,
|
|
|
+});
|
|
|
+chart.axis(false);
|
|
|
+chart
|
|
|
+ .interval()
|
|
|
+ .position('a*proportion')
|
|
|
+ .color('name', [
|
|
|
+ '#1890FF',
|
|
|
+ '#13C2C2',
|
|
|
+ '#2FC25B',
|
|
|
+ '#FACC14',
|
|
|
+ '#F04864',
|
|
|
+ '#8543E0',
|
|
|
+ ])
|
|
|
+ .adjust('stack');
|
|
|
+ chart.guide()
|
|
|
+ .text({
|
|
|
+ position: [ '50%', '50%' ],
|
|
|
+ content: "本月共60条任务"
|
|
|
+ });
|
|
|
+chart.pieLabel({
|
|
|
+ sidePadding: 30,
|
|
|
+ activeShape: true,
|
|
|
+ label1: function label1(data) {
|
|
|
+ return {
|
|
|
+ text: data.name,
|
|
|
+ fill: '#343434',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ label2: function label2(data) {
|
|
|
+ return {
|
|
|
+ text: data.proportion,
|
|
|
+ fill: '#999'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onClick: function onClick(ev) {
|
|
|
+ console.log(ev.data) ;
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+chart.render();
|
|
|
+
|
|
|
+ // 注意:需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
onInitChart2(F2, config) {
|
|
|
|
|
|
//折线图
|