较难解决的问题记录

  1. echarts的折线图 返回的数据中每条线的x轴都不同 需要展示在一个图中:

    series data需要处理为[[x轴,y轴],[x轴,y轴],[x轴,y轴]]格式
    xAxis data需要把所有线的x轴都放在一个[]中

let chart = echarts.init(document.getElementById("chart"));
 
    let data1 = [20, 30, 40, 50];
    let data2 = [2, 4, 6, 8, 10, 12, 14, 16];
    // 数组拼接
    let xAxisData = [...data1, ...data2];
    // 数组去重
    xAxisData = [...new Set(xAxisData)];
    // 排序
    xAxisData.sort((a, b) => {return a - b})
 
    let option = {
        legend: {
            name: ['data1', 'data2'],
            y: '15'
        },
        xAxis: [
            {
                name: 'x',
                type: 'category',
                data: xAxisData,
            }
        ],
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'line',
                data: [
                    ["20", 10],
                    ["30", 20],
                    ["40", 30],
                    ["50", 40],
                ],
                name: 'data1',
                // 因有缺失的点, 所以采用如下属性来使数据正常连接不断开
                connectNulls: true
            },
            {
                type: 'line',
                data: [
                    ["2", 1],
                    ["4", 2],
                    ["6", 3],
                    ["8", 4],
                    ["10", 5],
                    ["12", 6],
                    ["14", 7],
                    ["16", 8],
                ],
                name: 'data2',
                // 因有缺失的点, 所以采用如下属性来使数据正常连接不断开
                connectNulls: true
            }
        ],
        animation: false

较难解决的问题记录_第1张图片

你可能感兴趣的:(前端)