|
|
@@ -8,286 +8,429 @@ const PieLabel = require('@antv/f2/lib/plugin/pie-label'); // 引入 PieLabel
|
|
|
F2.Chart.plugins.register(PieLabel);
|
|
|
Page({
|
|
|
data: {
|
|
|
- reportDate:'2020年11月',
|
|
|
- servantName:'王阿姨',
|
|
|
- serviceDay:'28',
|
|
|
- percentTop:'88%',
|
|
|
- expendTotal:'1888',
|
|
|
- taskNum:'60',
|
|
|
+ reportDate: '2020年11月',
|
|
|
+ servantName: '王阿姨',
|
|
|
+ serviceDay: '28',
|
|
|
+ percentTop: '88%',
|
|
|
+ expendTotal: '1888',
|
|
|
+ taskNum: '60',
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
|
- onInitChart(F2, config) {
|
|
|
+ onInitChart(F2, config) {
|
|
|
// 饼状图
|
|
|
-const chart = new F2.Chart(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' },
|
|
|
-];
|
|
|
+ { 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.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.render();
|
|
|
-
|
|
|
// 注意：需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
|
|
|
onInitChart1(F2, config) {
|
|
|
// 本月任务分布饼状图
|
|
|
- const chart = new F2.Chart(config);
|
|
|
- let taskNum=this.data.taskNum;
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum = this.data.taskNum;
|
|
|
|
|
|
-// chart.plugins.register([ PieLabel ]);
|
|
|
+ // 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' },
|
|
|
-];
|
|
|
+ { 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,
|
|
|
- innerRadius: 0.5,
|
|
|
-});
|
|
|
-chart.axis(false);
|
|
|
-chart
|
|
|
- .interval()
|
|
|
- .position('a*proportion')
|
|
|
- .color('name', [
|
|
|
- '#EB6F49',
|
|
|
- '#00D98B',
|
|
|
- '#FDB628',
|
|
|
- '#0091F1',
|
|
|
- '#00E4EC',
|
|
|
- '#8256E8',
|
|
|
- ])
|
|
|
- .adjust('stack');
|
|
|
- chart.guide()
|
|
|
- .text({
|
|
|
- position: [ '50%', '50%' ],
|
|
|
- style:{
|
|
|
- fill:'#7ED4F6',
|
|
|
- fontSize:'12',
|
|
|
- },
|
|
|
- content: ` 本月共
|
|
|
+ chart.source(data);
|
|
|
+ chart.legend(false);
|
|
|
+ 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');
|
|
|
+ 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.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();
|
|
|
-
|
|
|
+
|
|
|
+ limitInPlot: true,
|
|
|
+ });
|
|
|
+ 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;
|
|
|
},
|
|
|
onInitChart2(F2, config) {
|
|
|
// 本月任务完成情况
|
|
|
- const chart = new F2.Chart(config);
|
|
|
- let taskNum=this.data.taskNum;
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum = this.data.taskNum;
|
|
|
|
|
|
-// chart.plugins.register([ PieLabel ]);
|
|
|
+ // 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' },
|
|
|
-];
|
|
|
+ { 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'
|
|
|
- };
|
|
|
+ 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;
|
|
|
},
|
|
|
- label2: function label2(data) {
|
|
|
- return {
|
|
|
- text: data.proportion,
|
|
|
- fill: '#7ED4F6'
|
|
|
- };
|
|
|
+ onInitChart3(F2, config) {
|
|
|
+
|
|
|
+ //任务完成趋势图
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ const data = [{
|
|
|
+ time: '2016-08-08 00:00:00',
|
|
|
+ value: 10,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-08 00:10:00',
|
|
|
+ value: 22,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-08 00:30:00',
|
|
|
+ value: 16,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 00:35:00',
|
|
|
+ value: 26,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 01:00:00',
|
|
|
+ value: 12,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 01:20:00',
|
|
|
+ value: 26,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 01:40:00',
|
|
|
+ value: 18,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 02:00:00',
|
|
|
+ value: 26,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 02:20:00',
|
|
|
+ value: 12,
|
|
|
+ type: '预期收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-08 00:00:00',
|
|
|
+ value: 4,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-08 00:10:00',
|
|
|
+ value: 3,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-08 00:30:00',
|
|
|
+ value: 6,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 00:35:00',
|
|
|
+ value: -12,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 01:00:00',
|
|
|
+ value: 1,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-09 01:20:00',
|
|
|
+ value: 9,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 01:40:00',
|
|
|
+ value: 13,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 02:00:00',
|
|
|
+ value: -3,
|
|
|
+ type: '实际收益率'
|
|
|
+}, {
|
|
|
+ time: '2016-08-10 02:20:00',
|
|
|
+ value: 11,
|
|
|
+ type: '实际收益率'
|
|
|
+}];
|
|
|
+ chart.source(data, {
|
|
|
+ time: {
|
|
|
+ type: 'timeCat',
|
|
|
+ tickCount: 3,
|
|
|
+ mask: 'hh:mm',
|
|
|
+ range: [ 0, 1 ]
|
|
|
},
|
|
|
- onClick: function onClick(ev) {
|
|
|
- console.log(ev.data) ;
|
|
|
-
|
|
|
+ value: {
|
|
|
+ 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('time', {
|
|
|
+ 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('time*value')
|
|
|
+ .color('type');
|
|
|
+
|
|
|
+
|
|
|
chart.render();
|
|
|
-
|
|
|
// 注意：需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
onInitChart4(F2, config) {
|
|
|
// 任务类完成详细情况
|
|
|
- // 本月任务分布饼状图
|
|
|
- const chart = new F2.Chart(config);
|
|
|
- let taskNum=this.data.taskNum;
|
|
|
+ const chart = new F2.Chart(config);
|
|
|
+ let taskNum = this.data.taskNum;
|
|
|
|
|
|
-// chart.plugins.register([ PieLabel ]);
|
|
|
+ // 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' },
|
|
|
-];
|
|
|
+ { 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.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: `完成
|
|
|
+ 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();
|
|
|
-
|
|
|
+ limitInPlot: true,
|
|
|
+ });
|
|
|
+
|
|
|
+ chart.render();
|
|
|
+
|
|
|
// 注意：需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
- onInitChart5(F2, config) {
|
|
|
+ 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' },
|
|
|
- ];
|
|
|
+ const data = [{
|
|
|
+ year: '2014 年',
|
|
|
+ sales: 145
|
|
|
+ }, {
|
|
|
+ year: '2015 年',
|
|
|
+ sales: 121
|
|
|
+ }, {
|
|
|
+ year: '2016 年',
|
|
|
+ sales: 100
|
|
|
+ }, {
|
|
|
+ year: '2017 年',
|
|
|
+ sales: 97
|
|
|
+ }, {
|
|
|
+ year: '2018 年',
|
|
|
+ sales: 85
|
|
|
+ }];
|
|
|
chart.source(data, {
|
|
|
- date: {
|
|
|
- range: [0, 1],
|
|
|
- type: 'timeCat',
|
|
|
- mask: 'MM-DD'
|
|
|
- },
|
|
|
- value: {
|
|
|
- max: 300,
|
|
|
- tickCount: 4
|
|
|
+ sales: {
|
|
|
+ tickCount: 5
|
|
|
}
|
|
|
});
|
|
|
- chart.area().position('date*value').color('city').adjust('stack');
|
|
|
- chart.line().position('date*value').color('city').adjust('stack');
|
|
|
+ // 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('year*sales')
|
|
|
+ .color('l(90) 0:#FBEC9F 1:#F3D34D'); // 定义柱状图渐变色
|
|
|
chart.render();
|
|
|
// 注意：需要把chart return 出来
|
|
|
return chart;
|
|
|
},
|
|
|
- onInitChart0(F2, config) {
|
|
|
+ onInitChart0(F2, config) {
|
|
|
|
|
|
- //折线图
|
|
|
+ //折线图
|
|
|
const chart = new F2.Chart(config);
|
|
|
const data = [
|
|
|
{ value: 63.4, city: 'New York', date: '2011-10-01' },
|
fuxubing