|
|
@@ -0,0 +1,380 @@
|
|
|
+
|
|
|
+
|
|
|
+import F2 from '@antv/f2';
|
|
|
+// 建议统一从 lib 下引入
|
|
|
+const PieLabel = require('@antv/f2/lib/plugin/pie-label'); // 引入 PieLabel 模块
|
|
|
+
|
|
|
+// 方式一：全局注册
|
|
|
+F2.Chart.plugins.register(PieLabel);
|
|
|
+import request from '../../../util/http'
|
|
|
+import apiUrl from '../../../util/apiUrl'
|
|
|
+var app = getApp();
|
|
|
+Page({
|
|
|
+ data: {
|
|
|
+ reportDate: '',
|
|
|
+ servantName: '',
|
|
|
+ serviceDay: '',
|
|
|
+ percentTop: '',
|
|
|
+ expendTotal: '',
|
|
|
+ taskNum: '',
|
|
|
+ reportInfo:'',
|
|
|
+ chartShow:true,
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ let reportInfo=app.globalData.reportInfo;
|
|
|
+ let serviceTime=JSON.parse(reportInfo.serviceTime);
|
|
|
+ let year=(serviceTime.year==null?'':serviceTime.year);
|
|
|
+ let month=(serviceTime.month==null?'':serviceTime.month);
|
|
|
+ console.log(reportInfo);
|
|
|
+ if(reportInfo.attrOne=='3'){
|
|
|
+ this.setData({
|
|
|
+ chartShow:false,
|
|
|
+
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.setData({
|
|
|
+ chartShow:true,
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.setData({
|
|
|
+ reportInfo:reportInfo,
|
|
|
+ reportDate:year+'年'+month+'月',
|
|
|
+ servantName:serviceTime.nickName,
|
|
|
+ serviceDay:serviceTime.serviceDays,
|
|
|
+ percentTop:serviceTime.serviceQuality,
|
|
|
+ expendTotal:reportInfo.expenses
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+
|
|
|
+ onInitChart1(F2, config) {
|
|
|
+ // 本月任务分布饼状图
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum = JSON.parse(this.data.reportInfo.pieChart).taskSum;
|
|
|
+ let dataList=JSON.parse(this.data.reportInfo.pieChart).randList;
|
|
|
+ dataList.forEach(item => {
|
|
|
+ item.percentage=(item.percentage)*1;
|
|
|
+ });
|
|
|
+ const data =dataList;
|
|
|
+
|
|
|
+ // const data = JSON.parse(this.data.reportInfo.pieChart).randList;
|
|
|
+ // const data=[{"taskName":"洗护类","percentage":0.2},{"taskName":"洗e类","percentage":0.8}]
|
|
|
+
|
|
|
+ chart.source(data);
|
|
|
+ chart.legend(false);
|
|
|
+ chart.coord('polar', {
|
|
|
+ transposed: true,
|
|
|
+ innerRadius: 0.6,
|
|
|
+ });
|
|
|
+ chart.axis(false);
|
|
|
+ chart
|
|
|
+ .interval()
|
|
|
+ .position('1*percentage')
|
|
|
+ .color('taskName', [
|
|
|
+ '#EB6F49',
|
|
|
+ '#00D98B',
|
|
|
+ '#FDB628',
|
|
|
+ '#0091F1',
|
|
|
+ '#00E4EC',
|
|
|
+ '#8256E8',
|
|
|
+ ])
|
|
|
+ .adjust('stack');
|
|
|
+ chart.guide()
|
|
|
+ .text({
|
|
|
+ position: ['50%', '50%'],
|
|
|
+ style: {
|
|
|
+ fill: '#7ED4F6',
|
|
|
+ fontSize: '12',
|
|
|
+ },
|
|
|
+ content: ` 本月共
|
|
|
+ ${taskNum}条任务`,
|
|
|
+
|
|
|
+ limitInPlot: true,
|
|
|
+ });
|
|
|
+ chart.pieLabel({
|
|
|
+ sidePadding: 30,
|
|
|
+ activeShape: true,
|
|
|
+ label1: function label1(data) {
|
|
|
+ return {
|
|
|
+ text: data.taskName,
|
|
|
+ fill: '#7ED4F6',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ label2: function label2(data) {
|
|
|
+ return {
|
|
|
+ text: data.percentage+'%',
|
|
|
+ fill: '#7ED4F6'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onClick: function onClick(ev) {
|
|
|
+ console.log(ev.data);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chart.render();
|
|
|
+
|
|
|
+ // 注意：需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart2(F2, config) {
|
|
|
+ // 本月任务完成情况
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let dataList=JSON.parse(this.data.reportInfo.finishInfo);
|
|
|
+ dataList.forEach(item => {
|
|
|
+ item.percent=(item.percent)*1;
|
|
|
+ item.const='const';
|
|
|
+ });
|
|
|
+ const data =dataList;
|
|
|
+
|
|
|
+ // const data=[{"name":"完成","percent":100,"const":'const'},{"name":"无法完成","percent":200,"const":'const'},{"name":"未完成","percent":300,"const":'const'},{"name":"补打卡","percent":400,"const":'const'}]
|
|
|
+ // const data = JSON.parse(this.data.reportInfo.finishInfo);
|
|
|
+
|
|
|
+ chart.source(data);
|
|
|
+ chart.legend(false);
|
|
|
+ chart.coord('polar', {
|
|
|
+ transposed: true,
|
|
|
+ });
|
|
|
+ chart.axis(false);
|
|
|
+ chart
|
|
|
+ .interval()
|
|
|
+ .position('const*percent')
|
|
|
+ .color('name', [
|
|
|
+ '#EB6F49',
|
|
|
+ '#00D98B',
|
|
|
+ '#FDB628',
|
|
|
+ '#0091F1',
|
|
|
+ '#00E4EC',
|
|
|
+ '#8256E8',
|
|
|
+ ])
|
|
|
+ .adjust('stack');
|
|
|
+
|
|
|
+ chart.pieLabel({
|
|
|
+ sidePadding: 30,
|
|
|
+ activeShape: true,
|
|
|
+ label1: function label1(data) {
|
|
|
+ return {
|
|
|
+ text: data.name,
|
|
|
+ fill: '#7ED4F6',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ label2: function label2(data) {
|
|
|
+ return {
|
|
|
+ text: data.percent+'%',
|
|
|
+ fill: '#7ED4F6'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onClick: function onClick(ev) {
|
|
|
+ console.log(ev.data);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chart.render();
|
|
|
+
|
|
|
+ // 注意：需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart3(F2, config) {
|
|
|
+
|
|
|
+ //任务完成趋势图
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ const data = JSON.parse(this.data.reportInfo.taskTrend);
|
|
|
+ chart.source(data, {
|
|
|
+ workDay: {
|
|
|
+ type: 'timeCat',
|
|
|
+ tickCount: 5,
|
|
|
+ // mask: 'hh:mm',
|
|
|
+ range: [ 0, 1 ]
|
|
|
+ },
|
|
|
+ taskNum: {
|
|
|
+ tickCount: 3,
|
|
|
+ // formatter: function formatter(ivalue) {
|
|
|
+ // return ivalue + '%';
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // chart.tooltip({
|
|
|
+ // showItemMarker: false,
|
|
|
+ // onShow: function onShow(ev) {
|
|
|
+ // const items = ev.items;
|
|
|
+ // items[0].name = null;
|
|
|
+ // items[0].name = items[0].title;
|
|
|
+ // items[0].value = '¥ ' + items[0].value;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ chart.axis('workDay', {
|
|
|
+ line: null,
|
|
|
+ label: function label(text, index, total) {
|
|
|
+ const textCfg = {};
|
|
|
+ if (index === 0) {
|
|
|
+ textCfg.textAlign = 'left';
|
|
|
+ } else if (index === total - 1) {
|
|
|
+ textCfg.textAlign = 'right';
|
|
|
+ }
|
|
|
+ return textCfg;
|
|
|
+ }
|
|
|
+});
|
|
|
+chart.axis('tem', {
|
|
|
+ grid: function grid(text) {
|
|
|
+ if (text === '0%') {
|
|
|
+ return {
|
|
|
+ lineDash: null,
|
|
|
+ lineWidth: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+chart.legend({
|
|
|
+ position: 'bottom',
|
|
|
+ offsetY: -5
|
|
|
+});
|
|
|
+chart.line()
|
|
|
+ .position('workDay*taskNum')
|
|
|
+ .color('name');
|
|
|
+
|
|
|
+
|
|
|
+chart.render();
|
|
|
+ // 注意：需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart4(F2, config) {
|
|
|
+ // 任务类完成详细情况
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let dataList=JSON.parse(this.data.reportInfo.classfInish).lefts;
|
|
|
+ dataList.forEach(item => {
|
|
|
+ item.finishRate=(item.finishRate)*1;
|
|
|
+ });
|
|
|
+ const data =dataList;
|
|
|
+ // const data = [{"taskClass":"洗护类","finishRate":100.00,"type":"1","name":null},{"taskClass":"做饭类","finishRate":66.67,"type":"2","name":null},{"taskClass":"打扫类","finishRate":83.33,"type":"3","name":null},{"taskClass":"照顾老人类","finishRate":100.00,"type":"4","name":null},{"taskClass":"照顾孩子类","finishRate":66.67,"type":"5","name":null}];
|
|
|
+ // const data=JSON.parse(this.data.reportInfo.classfInish).lefts;
|
|
|
+ chart.source(data, {
|
|
|
+ finishRate: {
|
|
|
+ tickCount: 3,
|
|
|
+ range: [ 0, 1 ],
|
|
|
+ formatter: function formatter(ivalue) {
|
|
|
+ return ivalue + '%';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // chart.tooltip({
|
|
|
+ // showItemMarker: false,
|
|
|
+ // onShow: function onShow(ev) {
|
|
|
+ // const items = ev.items;
|
|
|
+ // items[0].name = null;
|
|
|
+ // items[0].name = items[0].title;
|
|
|
+ // items[0].value = '¥ ' + items[0].value;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ chart.interval()
|
|
|
+ .position('taskClass*finishRate')
|
|
|
+ .color('l(90) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
|
|
|
+ chart.render();
|
|
|
+ // 注意：需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart5(F2, config) {
|
|
|
+
|
|
|
+ //任务无法完成原因
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ // const data = [{"number":"20","typeName":"任务太多"},{"number":"0","typeName":"我不会"},{"number":"10","typeName":"任务不详细"}];
|
|
|
+
|
|
|
+ let dataList=JSON.parse(this.data.reportInfo.unfinishd);
|
|
|
+ dataList.forEach(item => {
|
|
|
+ item.number=(item.number)*1;
|
|
|
+ });
|
|
|
+ const data =dataList;
|
|
|
+ // const data=JSON.parse(this.data.reportInfo.unfinishd);
|
|
|
+ chart.source(data, {
|
|
|
+ sales: {
|
|
|
+ tickCount: 5
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // chart.tooltip({
|
|
|
+ // showItemMarker: false,
|
|
|
+ // onShow: function onShow(ev) {
|
|
|
+ // const items = ev.items;
|
|
|
+ // items[0].name = null;
|
|
|
+ // items[0].name = items[0].title;
|
|
|
+ // items[0].value = '¥ ' + items[0].value;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ chart.interval()
|
|
|
+ .position('typeName*number')
|
|
|
+ .color('l(90) 0:#FBEC9F 1:#F3D34D'); // 定义柱状图渐变色
|
|
|
+ chart.render();
|
|
|
+ // 注意：需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart0(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;
|
|
|
+ },
|
|
|
+});
|
