这是需要实现的效果图。折线图的某个点的数据,是散点图的三种类型相加的总和。这种效果需要怎么实现,它们的x轴时间是一样的。只是折线图某个时间的数据,是散点图,三种类型的总和。研究了好久,都没有好的实现代码
data = [{
"plate": "信托业务板块",
"income": 4206.8784,
"day": "2019-05-16",
"total": 121354585
},
{
"plate": "投资银行板块",
"income": 2722.7124,
"day": "2019-05-16",
"total": 121354585
},
{
"plate": "信托业务板块",
"income": 1337.1485,
"day": "2019-05-16",
"total": 121354585
},
{
"plate": "信托业务板块",
"income": 598.2227,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "信托业务板块",
"income": 2039.8446,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "信托业务板块",
"income": 1643.4238,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "信托业务板块",
"income": 212.406,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "投资银行板块",
"income": 2034.0856,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "投资银行板块",
"income": 126.2644,
"day": "2019-05-17",
"total":54813548
},
{
"plate": "证券业务板块",
"income": 1858.9715,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "信托业务板块",
"income": 7889.3795,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "证券业务板块",
"income": 7443.5393,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "信托业务板块",
"income": 855.7508,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "信托业务板块",
"income": 1904.9121,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "证券业务板块",
"income": 7443.5393,
"day": "2019-05-22",
"total":546842184
},
{
"plate": "信托业务板块",
"income": 2714.2538,
"day": "2019-05-24",
"total":66665545
},
{
"plate": "投资银行板块",
"income": 5167.9757,
"day": "2019-05-24",
"total":66665545
},
{
"plate": "信托业务板块",
"income": 4912.2216,
"day": "2019-05-24",
"total":66665545
}
];
chart.source(data, {
day: {
values: ['2019-05-24', '2019-05-22',"2019-05-17"],
tickCount: 3,
type: 'timeCat',
mask: 'MM.DD',
range: [0.05, 0.95]
},
income: {
tickCount: 5
}
});
chart.axis('income', {
label: function label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip(false);
chart.point().position('day*income').color('plate').style({
fillOpacity: 0.65
});
chart.interaction('pan', {
mode: 'x'
});
/*.interaction('pinch', {
mode: 'x'
})*/
chart.line().position('day*total');
chart.point().position('day*total').color('red');
chart.render();
这是需要实现的效果图。折线图的某个点的数据,是散点图的三种类型相加的总和。这种效果需要怎么实现,它们的x轴时间是一样的。只是折线图某个时间的数据,是散点图,三种类型的总和。研究了好久,都没有好的实现代码
var chart = new F2.Chart({
id: 'mountNode',
syncY: true,
syncY: false,
pixelRatio: window.devicePixelRatio
});