数据源:
dataSource = [
{
supplierName: 'a',
datas: [
{time: '2020/1/1 0:00:00', GoodRate: 50, NGRate: 50},
{time: '2020/2/1 0:00:00', GoodRate: 60, NGRate: 40},
......
]
},
{
supplierName: 'b',
datas: [
{time: '2020/1/1 0:00:00', GoodRate: 50, NGRate: 50},
{time: '2020/2/1 0:00:00', GoodRate: 50, NGRate: 50},
......
]
}
];
目标:
绘制一个以time为类目轴,GoodRate为值,supplierName为系列的多折线图。
折线图效果:
处理数据:
option = {
title: {
text: '供应商良品率对比',
},
legend: {
type: 'scroll',
left: 'center',
top: 5
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
let label = '';
const length = params['length'];
if (length) {
label += params[0].name.replace(/\/1 0:00:00$/, '');
for (let i = 0; i < length; i++) {
label += '<br/>' + params[i].marker + params[i].seriesName + ':' + params[i].value.GoodRate.toFixed(2) + '%';
}
}
return label;
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (value) {
return value.replace(/\/1 0:00:00$/, '');
}
},
data: this.dataSource[0].datas.map(f => f.time);
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
// ***********************************处理数据了*********************************
dataset: this.dataSource.map(f => {return {source: f.datas}},
series: this.dataSource.map(f => (f, index) => {
return {
name: f.supplierName,
type: 'line',
datasetIndex: index,
encode: {y: 'GoodRate'}
}
}}
};