乐趣区

关于前端:较难解决的问题记录

  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

退出移动版