一个X值有多个Y值对应的折线图(echart)(单个折线)

392 阅读1分钟

需求

一天内 同类型有多个数据

想法

echart 折线图 能实现 画坐标点

实现效果

image.png

设计

元数据

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'

        }
    ]
}

至此,希望天下再无奇葩需求