多个series构成的柱状图如何切换为曲线图？echarts 折线配置项内容和展示
按客户需求，x轴显示一天24个小时，每个小时节点按15分钟一条显示柱状图，我就将数据分为4组，每15分钟一组，对应每个小时的00分、15分、30分、45分，现在遇到的问题是，切换为折线图时，如何将这4个数据组组成一个，现在切换折线图会有4条线，每15分钟一条线，我要把这4条线合为一条线，求解。
配置项如下
var mt = {
grid: {
left: "3%",
right: "3%",
top: "10%",
bottom: "3%",
containLabel: true
},
toolbox: {
show: true,
feature: {
myTool1: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
myChart.clear();
myChart.setOption(option);
}
}
}
},
legend: {
orient: "horizontal",
left: "center",
data: ["总电"]
},
yAxis: [{
type: "value"
}],
xAxis: [{
type: "category",
boundaryGap: true,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
}],
series:[{
name: '总电',
type: 'line',
//symbol:'none',
// stack: '总量',
smooth: true,
areaStyle: {
normal: {
//color:'#eee'
}
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
borderWidth: 1,
padding: 5
}
};
option = {
grid: {
left: "3%",
right: "3%",
top: "10%",
bottom: "3%",
containLabel: true
},
toolbox: {
show: true,
feature: {
myTool1: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
myChart.clear();
myChart.setOption(mt);
}
}
}
},
legend: {
orient: "horizontal",
left: "center",
data: ["总电"]
},
yAxis: [{
type: "value"
}],
xAxis: [{
type: "category",
boundaryGap: true,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
}],
series: [{
itemStyle: {
normal: {
color: "#b41111"
}
},
name: "总电",
type: "bar",
data: [{
value: "49.50",
name: "00:00",
unit: "度"
}, {
value: "26.50",
name: "01:00",
unit: "度"
}, {
value: "25.50",
name: "02:00",
unit: "度"
}, {
value: "24.00",
name: "03:00",
unit: "度"
}, {
value: "23.00",
name: "04:00",
unit: "度"
}, {
value: "24.00",
name: "05:00",
unit: "度"
}, {
value: "31.00",
name: "06:00",
unit: "度"
}, {
value: "32.00",
name: "07:00",
unit: "度"
}, {
value: "38.00",
name: "08:00",
unit: "度"
}],
unit: "度",
color: "#b41111"
}, {
itemStyle: {
normal: {
color: "#b41111"
}
},
name: "总电",
type: "bar",
data: [{
value: "46.50",
name: "00:15",
unit: "度"
}, {
value: "24.50",
name: "01:15",
unit: "度"
}, {
value: "22.50",
name: "02:15",
unit: "度"
}, {
value: "23.50",
name: "03:15",
unit: "度"
}, {
value: "23.00",
name: "04:15",
unit: "度"
}, {
value: "23.00",
name: "05:15",
unit: "度"
}, {
value: "33.00",
name: "06:15",
unit: "度"
}, {
value: "30.50",
name: "07:15",
unit: "度"
}, {
value: "42.00",
name: "08:15",
unit: "度"
}],
unit: "度",
color: "#b41111"
}, {
itemStyle: {
normal: {
color: "#b41111"
}
},
name: "总电",
type: "bar",
data: [{
value: "48.00",
name: "00:30",
unit: "度"
}, {
value: "23.50",
name: "01:30",
unit: "度"
}, {
value: "24.50",
name: "02:30",
unit: "度"
}, {
value: "24.00",
name: "03:30",
unit: "度"
}, {
value: "22.00",
name: "04:30",
unit: "度"
}, {
value: "29.50",
name: "05:30",
unit: "度"
}, {
value: "30.50",
name: "06:30",
unit: "度"
}, {
value: "30.50",
name: "07:30",
unit: "度"
}, {
value: "64.00",
name: "08:30",
unit: "度"
}],
unit: "度",
color: "#b41111"
}, {
itemStyle: {
normal: {
color: "#b41111"
}
},
name: "总电",
type: "bar",
data: [{
value: "42.50",
name: "00:45",
unit: "度"
}, {
value: "24.00",
name: "01:45",
unit: "度"
}, {
value: "24.00",
name: "02:45",
unit: "度"
}, {
value: "22.50",
name: "03:45",
unit: "度"
}, {
value: "21.50",
name: "04:45",
unit: "度"
}, {
value: "33.00",
name: "05:45",
unit: "度"
}, {
value: "28.50",
name: "06:45",
unit: "度"
}, {
value: "37.00",
name: "07:45",
unit: "度"
}, {
value: "0.00",
name: "08:45",
unit: "度"
}],
unit: "度",
color: "#b41111"
}],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
borderWidth: 1,
padding: 5
}
};
截图如下
