共计 746 个字符,预计需要花费 2 分钟才能阅读完成。
-
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
正文完