需求
一天内 同类型有多个数据
想法
echart 折线图 能实现 画坐标点
实现效果
设计
元数据
chartData = {
'Mon': [2, 9, 5],
'Tue': [5, 3, 1],
'Wed': [1, 3, 4]
}
目标样式数据
[
[0,2],
[0,9],
[0,5],
[1,5],
[1,3],
[1,1],
[2,5],
[3,3],
[4,1]
]
这样子,我们的想法就很明确了。就是画一个坐标系的连线
代码
let chartData = {
'Mon': [2, 9, 5],
'Tue': [5, 3, 1],
'Wed': [1, 3, 4]
}
let seriesData = []
Object.values(chartData).forEach((item, key) => {
item.forEach(value => {
seriesData.push([key, value])
})
})
let option = {
xAxis: {
type: 'category',
data: Object.keys(chartData),
axisLabel: {
formatter: function (value, index) {
return Object.keys(chartData)[index]
}
}
},
yAxis: {},
series: [
{
symbolSize: 20,
data: seriesData,
type: 'line'
}
]
}
至此,希望天下再无奇葩需求