|
@@ -84,12 +84,12 @@ chart
|
|
|
.interval()
|
|
|
.position('a*proportion')
|
|
|
.color('name', [
|
|
|
- '#1890FF',
|
|
|
- '#13C2C2',
|
|
|
- '#2FC25B',
|
|
|
- '#FACC14',
|
|
|
- '#F04864',
|
|
|
- '#8543E0',
|
|
|
+ '#EB6F49',
|
|
|
+ '#00D98B',
|
|
|
+ '#FDB628',
|
|
|
+ '#0091F1',
|
|
|
+ '#00E4EC',
|
|
|
+ '#8256E8',
|
|
|
])
|
|
|
.adjust('stack');
|
|
|
chart.guide()
|
|
@@ -97,11 +97,11 @@ chart
|
|
|
position: [ '50%', '50%' ],
|
|
|
style:{
|
|
|
fill:'#7ED4F6',
|
|
|
- fontSize:'13',
|
|
|
+ fontSize:'12',
|
|
|
},
|
|
|
- content: `本月共
|
|
|
- ${taskNum}条任务`,
|
|
|
- rotate: Math.PI / 4,
|
|
|
+ content: ` 本月共
|
|
|
+ ${taskNum}条任务`,
|
|
|
+
|
|
|
limitInPlot:true,
|
|
|
});
|
|
|
chart.pieLabel({
|
|
@@ -130,7 +130,162 @@ chart.render();
|
|
|
// 注意:需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
- onInitChart2(F2, config) {
|
|
|
+ onInitChart2(F2, config) {
|
|
|
+ // 本月任务完成情况
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum=this.data.taskNum;
|
|
|
+
|
|
|
+// chart.plugins.register([ PieLabel ]);
|
|
|
+ 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(false);
|
|
|
+chart.coord('polar', {
|
|
|
+ transposed: true,
|
|
|
+});
|
|
|
+chart.axis(false);
|
|
|
+chart
|
|
|
+ .interval()
|
|
|
+ .position('a*proportion')
|
|
|
+ .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.proportion,
|
|
|
+ fill: '#7ED4F6'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onClick: function onClick(ev) {
|
|
|
+ console.log(ev.data) ;
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+chart.render();
|
|
|
+
|
|
|
+ // 注意:需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart4(F2, config) {
|
|
|
+ // 任务类完成详细情况
|
|
|
+ // 本月任务分布饼状图
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum=this.data.taskNum;
|
|
|
+
|
|
|
+// chart.plugins.register([ PieLabel ]);
|
|
|
+ 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: 'left'
|
|
|
+});
|
|
|
+chart.coord('polar', {
|
|
|
+ transposed: true,
|
|
|
+ innerRadius: 0.5,
|
|
|
+});
|
|
|
+chart.axis(false);
|
|
|
+chart
|
|
|
+ .interval()
|
|
|
+ .position('a*proportion')
|
|
|
+ .color('name', [
|
|
|
+ '#EB6F49',
|
|
|
+ '#00D98B',
|
|
|
+ '#FDB628',
|
|
|
+ '#0091F1',
|
|
|
+ '#00E4EC',
|
|
|
+ '#8256E8',
|
|
|
+ ])
|
|
|
+ .adjust('stack')
|
|
|
+ .style({
|
|
|
+ lineWidth: 1,
|
|
|
+ stroke: '#4413A0',
|
|
|
+ lineJoin: 'round',
|
|
|
+ lineCap: 'round'
|
|
|
+ });
|
|
|
+ chart.guide()
|
|
|
+ .text({
|
|
|
+ position: [ '50%', '50%' ],
|
|
|
+ style:{
|
|
|
+ fill:'#7ED4F6',
|
|
|
+ fontSize:'12',
|
|
|
+ backgroundColor:'#fff',
|
|
|
+ },
|
|
|
+ content: `完成
|
|
|
+占比`,
|
|
|
+
|
|
|
+ limitInPlot:true,
|
|
|
+ });
|
|
|
+
|
|
|
+chart.render();
|
|
|
+
|
|
|
+ // 注意:需要把chart return 出来
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ onInitChart5(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;
|
|
|
+ },
|
|
|
+ onInitChart0(F2, config) {
|
|
|
|
|
|
//折线图
|
|
|
const chart = new F2.Chart(config);
|