关于Echarts多条折线图堆叠折线绘制错误问题

开发中遇到这样一个问题, 一个Echarts折线图, 里面有不定数量条的折线, 然后在开发过程中发现tooltip中显示的数据和折线绘制的高度有差异, 上个图

在这里插入图片描述
从图中可以比较清楚的看到, 红色和红色下面紧挨着的灰色这两条线, 根据tooltip显示的数据量分别只有91115.33和162.58, 但是在绘制的折线图上, 都是大概在三百万上下的高度

因为是接受的同事的代码, 反复尝试修改无果, 一开始以为是坐标轴Y轴范围太大了, 也试过处理, 但是没有用

最有仔细的阅读代码, 逐个配置项的比对文档, 感觉是有配置项写的有问题(无奈的笨办法)

最后发现了问题, 上面说过, 这个折线图的折线数据不定, 所以在处理后端返回的数据时出现了问题, 上个代码

 this.chartOption = this.$deepCopy(option) // 基础配置, 因为不定数量条折线, 所以无法写死
this.chartOption.color = this.colorArr 
let chartData = this.$deepCopy(this.chartMes) // 折线图数据数组, 每一项都是一条折线图的数据
let xData = []
let seriesData = []
let tps = Object.keys(chartData)
if (!tps || !tps.length) return
let firstTpArr = chartData[tps[0]] // 根据第一项数据获取统一X轴刻度
firstTpArr.forEach(item => {
    xData.push(item.resTime) // 生成X轴
})
for (let i = 0; i < tps.length; i++) {
    seriesData.push({
        name: tps[i], // 每一项的名字,这个没重复
        type: 'line',
        stack: 'Total', // 问题就是这里, stack属性写死了
        data: [],
        symbol: 'circle', // 设定为实心点
        symbolSize: 7 // 设定实心点的大小
    })
}复制

如上代码, 问题就是stack属性写死为 ‘total’ 了, 就导致每条数据的stack属性都是’total’

看一下文档
在这里插入图片描述
官方文档对于stack的解释是对于同个类目轴上系列配置相同的stack值可以堆叠放置, 什么意思呢, 看一下错误图大概就明白了, 就是同一个X轴的坐标刻度上, 折线图的值是堆叠的, 也就是相加的, 看到红色折线, 如果将其他所有项相加, 刚好是这个位置

而官方文档中也给出了示意图, stack的两种方式

方式一, 不堆叠, 即不写stack属性, 或者stack不同名
在这里插入图片描述
方式二
数据堆叠, 每一条这些图都有相同的stack名, 或者像官方示例代码里的写法

官方效果图

意向这条折线在鼠标当前所在X轴位置只有30, 但是实际显示高度是950, 这就是数据堆叠的效果

具体使用哪种显示效果, 我更倾向于第一种, 不会造成一些误解

如果有项目需要, 大家也可以尝试一下第二种

最后, 错误代码修改方式为

 // 省略专用注释 ... 
stack: 'Total' + i, // 给每一个stack起一个不同的名字
// stack: 'Total', // 把stack注释掉, 不写也可以 
// 省略专用注释 ... 复制

以上, over

标签

关于Echarts多条折线图堆叠折线绘制错误问题