当前位置: 首页 > Web前端 > HTML

更多难题记录

时间:2023-03-28 01:16:31 HTML

echarts的折线图返回的数据中每条线的x轴不同,需要用图表展示:系列数据需要处理为[[x-axis,y-axis],[x-axis,y-axis],[x-axis,y-axis]Axis]]formatxAxis数据需要将所有行的x轴放在一个[]letchart=echarts.init(document.getElementById("chart"));让data1=[20,30,40,50];让data2=[2,4,6,8,10,12,14,16];//数组拼接letxAxisData=[...data1,...data2];//数组去重xAxisData=[...newSet(xAxisData)];//排序xAxisData.sort((a,b)=>{returna-b})letoption={legend:{name:['data1','data2'],y:'15'},xAxis:[{name:'x',type:'category',data:xAxisData,}],yAxis:{type:'value'},series:[{type:'line',数据:[["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:falseginxfront-endand后端配置