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
- nginx前后端配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。