echarts多个折线案例

var data = [
{"date":"2023-06-11","method":"","total":"9"},
{"date":"2023-06-12","method":"","total":"73"},
{"date":"2023-06-13","method":"","total":"107"},
{"date":"2023-06-13","method":"article","total":"10"},
{"date":"2023-06-13","method":"home","total":"9"},
{"date":"2023-06-14","method":"article","total":"27"},
{"date":"2023-06-14","method":"home","total":"93"},
{"date":"2023-06-15","method":"article","total":"4"},
{"date":"2023-06-15","method":"home","total":"67"},
{"date":"2023-06-16","method":"article","total":"17"},
{"date":"2023-06-16","method":"home","total":"83"},
{"date":"2023-06-17","method":"article","total":"2"},
{"date":"2023-06-17","method":"home","total":"61"},
{"date":"2023-06-18","method":"home","total":"35"}
];
// 使用对象字面量创建 totalsByMethod 对象，将日期和方法作为键，总数作为值
var totalsByMethod = {};
data.forEach(item => {
var date = item.date;
var method = item.method;
var total = parseInt(item.total);
if (!totalsByMethod[date]) {
totalsByMethod[date] = {};
}
totalsByMethod[date][method] = total;
});
// 获取日期数组和方法数组
var xAxisData = Object.keys(totalsByMethod);
var methodArray = Array.from(new Set(data.map(item => item.method)));
// 创建 seriesData 数组，存储各个方法的数据
var seriesData = methodArray.map(method => {
return {
name: method,
type: 'line',
data: xAxisData.map(date => totalsByMethod[date][method] || 0)
};
});
// 创建 ECharts 实例并配置选项
var chart = echarts.init(document.getElementById('chart-container'));
var options = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: seriesData
};
chart.setOption(options);

优化部分的说明：
使用对象字面量创建
totalsByMethod 对象，并直接将日期和方法作为键，总数作为值，避免了后续的判断和多次访问对象属性。
使用
Object.keys(totalsByMethod) 获取日期数组，而不是使用原始数据进行遍历和提取。
使用
Array.from(new Set(data.map(item => item.method))) 获取方法数组，使用 Set 去重并转换为数组。
使用
methodArray.map() 创建 seriesData 数组，直接遍历方法数组并构建每个方法的数据对象。
在
data 属性中使用 xAxisData.map(date => totalsByMethod[date][method] || 0)，一次性获取每个方法在各个日期的总数值。
这些优化步骤有助于减少代码中的重复计算和遍历次数，并提高了代码的可读性和简洁性。