You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.7 KiB
101 lines
2.7 KiB
// import F2 from '../../static/f2-canvas/lib/f2';
|
|
import complateF2 from './complateF2';
|
|
|
|
const F2 = complateF2();
|
|
|
|
|
|
export function lineChart(source) {
|
|
const { data, config } = source;
|
|
return (canvas, width, height) => {
|
|
// data = [
|
|
// {
|
|
// value: 10,
|
|
// time: "1",
|
|
// type: "案发数"
|
|
// },
|
|
// ];
|
|
const xAxis = config && config.xAxis ? config.xAxis : 'time';
|
|
const yAxis = config && config.yAxis ? config.yAxis : 'value';
|
|
const flag = config && config.flag ? config.flag : null;
|
|
const unit = config && config.unit ? config.unit : '';
|
|
const padding = config && config.padding ? config.padding : [10, 10, 30, 30];
|
|
|
|
const chart = new F2.Chart({
|
|
el: canvas,
|
|
width,
|
|
height,
|
|
padding,
|
|
});
|
|
chart.source(data, {
|
|
time: {
|
|
type: 'timeCat',
|
|
},
|
|
});
|
|
|
|
chart.axis(xAxis, {
|
|
label: (text, index, total) => {
|
|
const cfg = {};
|
|
// 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
|
|
// if (flag != 'cityCation') {
|
|
// if (index === 0) {
|
|
// cfg.textAlign = 'start';
|
|
// } else if (index > 0 && index === total - 1) {
|
|
// cfg.textAlign = 'end';
|
|
// }
|
|
// }
|
|
|
|
if (flag == 'pccsMonth') {
|
|
cfg.text = parseInt(text.substring(8)); // cfg.text 支持文本格式化处理
|
|
} else if (flag == 'cityCation' || flag == 'airRateMonth') {
|
|
cfg.text = text.substring(2) + '月';
|
|
}
|
|
return cfg;
|
|
},
|
|
});
|
|
|
|
// chart.axis(yAxis, {
|
|
// label: (text, index, total) => {
|
|
// const cfg = {};
|
|
// cfg.text = '';
|
|
// return cfg;
|
|
// }
|
|
// })
|
|
|
|
chart.tooltip({
|
|
onChange(obj) {
|
|
// obj: { x, y, title, items }
|
|
const item = obj.items[0];
|
|
const items = obj.items;
|
|
if (flag == 'airRateMonth') {
|
|
item.name =
|
|
item.origin.year +
|
|
item.origin.month.substring(2) +
|
|
'月-' +
|
|
'优良天数';
|
|
item.value = ' ' + item.value + '天';
|
|
} else {
|
|
for (const i of items) {
|
|
i.value += unit;
|
|
}
|
|
}
|
|
},
|
|
});
|
|
chart.legend('type', {
|
|
position: 'bottom',
|
|
align: 'center',
|
|
// offsetY: 20
|
|
});
|
|
|
|
const axis = `${xAxis}*${yAxis}`;
|
|
if (config && config.type == 'map') {
|
|
chart.line().position(axis);
|
|
chart.area().position(axis);
|
|
} else if (config && config.type == 'contrast') {
|
|
chart.line().position(axis).color('type');
|
|
} else {
|
|
chart.line().position(axis);
|
|
}
|
|
chart.render();
|
|
return chart;
|
|
};
|
|
}
|
|
|