折线图 series里两个data长度不一致时 如何让两条数据各占x轴的一半echarts 折线配置项内容和展示
想模仿深度图的做成不管绿色数据多还是红色数据多 绿色只在左半边显示 红色只在右半边显示 求助各位
配置项如下
const source = {
"data": [
{
"y": [
-0.08757711745530684,
-0.09257419176659344,
-0.10434273241214112,
-0.11102871243415843,
-0.12167063420611815,
-0.12659103576232295,
-0.13121990458232766,
-0.13563430266830012,
-0.1371341723169237,
-0.1355304670572526,
-0.12985296578409328,
-0.12728737360598508,
-0.12886343145503226,
-0.12915159036511864,
-0.1364357712514969,
-0.13832882905935842,
-0.14273373753982224,
-0.14189400738941713,
-0.1384664355817929,
-0.13557391714251454,
-0.1314533535575781,
-0.1257901777414059,
-0.12109157955915678,
-0.11313039575891234,
-0.10144514534406283,
-0.0918696686160068,
-0.08109198925440157,
-0.0723250954034319,
-0.06728257526604793,
-0.06396950308645921,
-0.0624158085548034,
-0.06170523267157844,
-0.06096425681673875,
-0.05786166641957024,
-0.054726665912893366,
-0.05027278330858891,
-0.049362462076453575,
-0.04715642733480025,
-0.04963723025842892,
-0.052102275805485626,
-0.05547063210704372,
-0.05774900939249138,
-0.05839280229696772,
-0.060854184405595285,
-0.0605719011260892,
-0.05966594770904474,
-0.06221579866962235,
-0.059749989504023576,
-0.06166825015470516,
-0.06243049899155403,
-0.06404052186558044,
-0.06899954572493856,
-0.07504917794535762,
-0.08061044059878944,
-0.0852038213133566,
-0.08738789820924894,
-0.0896575496548269,
-0.08955029579977558,
-0.08613160682671978,
-0.08105979296285057,
-0.0745478402764728,
-0.06855452354484368,
-0.05932189859697505,
-0.054276488157736766,
-0.049194623964716966,
-0.045851961165826335,
-0.03909544478311372,
-0.035534074001907535,
-0.03206799548936461,
-0.030510405832893574,
-0.02747820587541024,
-0.026519409459520662,
-0.027491424367440214,
-0.02878284550810911,
-0.03208374173309456,
-0.03578743498782359,
-0.03904232730057836,
-0.04244685028216802,
-0.0463556915531067,
-0.049815222364866414,
-0.05879222549248174,
-0.062314004671300466,
-0.0649223624939513,
-0.06878229506138014,
-0.07183285794147516,
-0.07379439336507974,
-0.07648255912125962,
-0.07857034635978008,
-0.08093638729836711,
-0.08208747087719434,
-0.08317432953268625,
-0.08405722244230815,
-0.08610707979110345,
-0.08917905053110911,
-0.08838623615039888,
-0.08267418149029349,
-0.08170333872569907,
-0.08020771220897621,
-0.07958753680834679,
-0.07848509437904452,
-0.06
],
"name": "test1",
"x": [
1748.3615809001294,
1750.3518378688834,
1752.3420948362038,
1754.3323518048114,
1757.317737256126,
1759.307994223259,
1761.298251192464,
1764.2836366445315,
1766.2738936132416,
1768.2641505807715,
1770.2544075496155,
1773.2397930006452,
1775.2300499700034,
1777.2203069364261,
1780.2076246707948,
1782.2017462030967,
1784.1958677351763,
1786.189989266285,
1789.1811715666502,
1791.1752930993493,
1793.1694146310904,
1796.1605969298816,
1798.154718460456,
1800.148839993059,
1802.142961524692,
1805.1341438242252,
1807.1282653567057,
1809.122386889472,
1812.1135691881866,
1814.1076907195395,
1816.1018122511907,
1818.095933784115,
1821.0871160820752,
1823.081237614842,
1825.0753591476464,
1827.0678690864456,
1830.0601635673027,
1832.0550265530921,
1834.0498895395722,
1836.0447525262232,
1839.0370470047876,
1841.0319099910464,
1843.0267729769892,
1845.0216359636136,
1848.0139304423856,
1850.0087934286084,
1852.0036564157583,
1853.9985194023693,
1855.9933823889044,
1858.9856768682776,
1860.980539853168,
1862.97540284048,
1864.970265826757,
1866.9651288132052,
1869.9574232937089,
1871.952286279509,
1873.9471492657453,
1875.9420122516776,
1877.9368752375485,
1879.9317382251072,
1881.9266012113605,
1883.9214641970511,
1886.9137586759173,
1888.908621662456,
1890.9034846481866,
1892.898347634612,
1894.893210621484,
1896.8880736062924,
1898.8829365940342,
1900.8558487493647,
1902.8287609048584,
1904.8016730595261,
1906.7745852148526,
1908.7474973731055,
1911.7068656039767,
1913.6797777616518,
1915.6526899167459,
1917.6256020727649,
1919.609943352204,
1921.6057137568607,
1925.597254563937,
1927.5930249690775,
1929.5887953724705,
1931.5845657783407,
1933.5803361829733,
1935.5761065860934,
1937.5718769902005,
1939.5676473935541,
1942.5613030012253,
1944.5570734056798,
1946.5528438096426,
1948.5486142135849,
1950.5443846172855,
1952.5401550217139,
1954.535925426645,
1956.5316958303245,
1958.5274662344848,
1960.5232366391613,
1962.519007044565,
1964.5147774479744,
3000.781608651918,
],
"marker": "red",
"mode": "lines"
},
{
"y": [
-0.031720328940788016,
-0.030474775746979037,
-0.030818978676878692,
-0.032905575291961094,
-0.03509662374004333,
-0.03758917414732346,
-0.037227596127499964,
-0.0326453049101227,
-0.02860247340465032,
-0.026951833918601054,
-0.02476973587715576,
-0.027559295078686985,
-0.03125544211274845,
-0.03800341477260194,
-0.04302615733662437,
-0.0444779292608265,
-0.04618396285121662,
-0.04435621485836266,
-0.042363217408710116,
-0.0428117679287742,
-0.043370290626531,
-0.04945446770214363,
-0.05144816452445298,
-0.052065880001968386,
-0.05043379661188594,
-0.04986501615623918,
-0.05057548656354216,
-0.05152745784337266,
-0.05377057038452455,
-0.056574858541344475,
-0.057604097409235465,
-0.06074895480251425,
-0.06235067030496772,
-0.0654936601900413,
-0.06932256395225869,
-0.07297985329445639,
-0.07469405569410079,
-0.0763771942941102,
-0.07734125364722698,
-0.08049404750156143,
-0.08271710792071864,
-0.0836084193201553,
-0.08427865288086732,
-0.0849682830232687,
-0.08388960407288648,
-0.0818428819431279,
-0.07838531871796428,
-0.07306137005905347,
-0.0688761449695069,
-0.06254393079125417,
-0.05961663122723574,
-0.0552067618467113,
-0.05192930261889934,
-0.0483501117552103,
-0.04639901365698645,
-0.04641453188999997,
-0.04791769732552139,
-0.04851844583585474,
-0.04951877022851976,
-0.05055005655433178,
-0.0506428134734244,
-0.05207625252903751,
-0.05316738662161622,
-0.05545536515629625,
-0.05812531979148899,
-0.06089916954754344,
-0.06565868711042061,
-0.07003927228621988,
-0.07695490898103266,
-0.07662351934040942,
-0.07522663368971029,
-0.07542530819911515,
-0.07827777273016734,
-0.07912241727509911,
-0.07965713942394792,
-0.07987294155234366,
-0.07508998872807067,
-0.07166558309208773,
-0.0659433928536746,
-0.062459910476644585,
-0.061288782836802086,
-0.0629269869464409,
-0.06747217181396974,
-0.06792406267669264,
-0.07053830496597381,
-0.0723538695297083,
-0.0772380903212592,
-0.08313315359821707,
-0.08458527572770831,
-0.08674559422868437,
-0.08789309898629709,
-0.09197626495993746,
-0.09567706626357604,
-0.09872618406648162,
-0.09753791152688847,
-0.09087963400666016,
-0.08440683586767453,
-0.0784009531101369,
-0.07255827898116489,
-0.06710651951915979
],
"name": "test1",
"x": [
3851.781608651918,
3853.776905796592,
3855.772202942932,
3858.76514865894,
3860.760445804021,
3862.755742948776,
3864.751040092461,
3866.746337238405,
3868.7416343819427,
3871.7345801001534,
3873.729877245256,
3875.725174388285,
3877.720471534409,
3879.712241012601,
3881.704010489608,
3884.691664705802,
3886.683434183226,
3888.675203661048,
3890.6669731388292,
3892.658742616516,
3894.6505120941633,
3897.6381663107672,
3899.6299357889397,
3901.621705266909,
3903.613474743097,
3905.6052442202754,
3907.597013698236,
3909.588783177025,
3912.488866566593,
3914.4222554938183,
3916.355644422477,
3918.289033348942,
3920.2224222768104,
3922.155811204687,
3925.055894595751,
3926.989283523395,
3928.9226724502423,
3930.856061377421,
3932.789450305864,
3934.7228392330585,
3937.6229226241694,
3939.569447374866,
3941.5291079470067,
3943.6997692436207,
3945.6594298144537,
3947.6190903870825,
3950.5585812456975,
3952.518241817677,
3954.4779023898714,
3956.3665997314674,
3958.2552970717657,
3960.14399441299,
3962.9770404254814,
3964.8657377661625,
3966.7544351080787,
3968.643132449488,
3970.562896884529,
3973.4891441780155,
3975.439975708853,
3977.3908072383038,
3979.341638766845,
3981.2924702965374,
3983.2433018265833,
3986.169549120781,
3988.1203806499766,
3990.0712121800066,
3992.022043709284,
3993.9728752392334,
3997.874538297672,
4000.816011330777,
4002.797294335533,
4004.778577341964,
4006.7598603445335,
4008.7411433524157,
4010.722426357072,
4012.703709363087,
4015.6745748855255,
4017.653739923671,
4019.6329049577307,
4021.6120699934254,
4023.5912350296308,
4025.57040006476,
4027.549565100415,
4029.5287301365724,
4032.4974776883946,
4034.476642724497,
4036.455807760011,
4038.4349727958665,
4040.414137831613,
4042.393302867077,
4044.3724679013135,
4047.3070053557562,
4049.251960293673,
4051.1969152293104,
4053.1418701675707,
4055.0868251033935,
4057.031780040576,
4059.949212444705,
4061.8941673821214,
4063.839122318365
],
"marker": "green",
"mode": "lines"
}
],
"layout": {
"title": "test",
"y": "cross track error [m]",
"x": "map distance [m]"
}
}
const parseData = (source) => {
const data = source.data
const result = data.reduce((preData, curr, currIdx) => {
const ys = curr.y
const echartsData = {}
echartsData.type = 'line'
echartsData.name = curr.name
echartsData.data = curr.x.map((x, idx) => {
return [
x,
ys[idx]
]
})
// if (preData[currIdx - 1]) {
// const prevDataSource = (preData[currIdx - 1].data).slice(0).map(item => [item[0], null])
// echartsData.data = prevDataSource.concat(echartsData.data)
// }
preData.push(echartsData)
return preData
}, [])
// if (result[result.length - 1]) {
// const endData = result[result.length - 1].data.slice(0)
// result.forEach((echartsData) => {
// echartsData.data = echartsData.data.concat(endData.slice(echartsData.data.length))
// echartsData.data.length = endData.length
// })
// }
return result
}
const d = parseData(source)
console.log(d)
option = ({
dataZoom: [{
startValue: 0
}, {
type: 'inside'
}],
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
},
xAxis: {
type: 'value',
start:1900,
boundaryGap:true,
min:1700,
// boundaryGap: false,
// axisLabel: {
// // showMinLabel: false,
// formatter: function(val) {
// return val
// }
// },
// interval: 13,
// minInterval: 1000,
},
yAxis: [{
type: 'value',
position: 'right',
splitNumber: 4,
axisTick: {
inside: true,
},
axisLabel: {
inside: true,
showMinLabel: false,
},
splitLine: {
show: false,
}
}],
series: d
// [{
// data: [
// [0.001, 9999],
// [0.004, 8888],
// [0.005, 7777],
// [0.006, 6666],
// [0.007, 5555],
// [0.008, 4444],
// [0.009, 3333],
// [0.01, 2222],
// [0.011, 1111],
// [0.012, 99],
// ],
// type: 'line',
// connectNulls: true,
// symbol: 'circle',
// showSymbol: false,
// stack: '123',
// symbolSize: 10,
// itemStyle: {
// color: 'blue',
// borderColor: 'yellow',
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10
// },
// markLine: {
// data: {}
// },
// label: {
// show: true,
// position: 'right',
// distance: 10,
// padding: 10,
// fontSize: 12,
// stack: '123',
// color: '#fff',
// backgroundColor: 'rgba(0, 0, 0, .6)',
// formatter: function(params) {
// return [`price ：{a|￥${params.data[0]}}`, `amount ：{a|${Math.round(params.data[1])}}`].join('\n')
// },
// rich: {
// a: {
// color: '#fff',
// fontSize: '12',
// fontWeight: 'bold',
// lineHeight: '20',
// },
// }
// },
// lineStyle: {
// color: '#008c00',
// },
// areaStyle: {
// color: 'green',
// opacity: .2,
// },
// },
// {
// data: [
// [0.1524, 666],
// [0.1539,777],
// [0.154,888],
// [0.1541,999],
// [0.1545,1111],
// [0.1547,2222],
// [0.1553,3333],
// [0.1558,4444],
// [0.1564,5555],
// [0.1567,6666],
// [0.1569,7777],
// [0.157,8888],
// [0.1574,9999],
// [0.1575,10000],
// [0.158,11111],
// [0.1583,22222],
// [0.1588,33333],
// [0.159,44444],
// [0.16,55555],
// [0.1608,66666]
// ],
// type: 'line',
// symbol: 'circle',
// showSymbol: false,
// stack: '123',
// symbolSize: 10,
// connectNulls: true,
// itemStyle: {
// color: 'blue',
// borderColor: 'yellow',
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10
// },
// label: {
// show: true,
// position: 'left',
// distance: 10,
// padding: 10,
// fontSize: 12,
// color: '#fff',
// backgroundColor: 'rgba(0, 0, 0, .6)',
// formatter: function(params) {
// return [`price ：{a|￥${params.data[0]}}`, `amount ：{a|${Math.round(params.data[1])}}`].join('\n')
// },
// rich: {
// a: {
// color: '#fff',
// fontSize: '12',
// fontWeight: 'bold',
// lineHeight: '20',
// },
// }
// },
// lineStyle: {
// color: '#ee3523',
// },
// areaStyle: {
// color: 'red',
// opacity: .2,
// },
// },
// ],
});
截图如下
