Echarts显示折线图颜色错乱问题

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 403 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

背景：

需要对比本周和上一周的数据折线图。
上一周的7天数据都是全的，但本周的数据会有缺失，如当前周六，那么只有前六天的数据，周日的数据缺失。

问题：

当先画本周再画上一周数据的时候，合并显示的时候颜色就会错乱。如图：
在这里插入图片描述

解决方法：

交换绘制顺序，先绘制完整个数的上一周的数据图像，然后再绘制本周较少数据的图像。这样就不会错乱了。如图：

在这里插入图片描述
Echarts链接：

https://echarts.apache.org/examples/en/editor.html?c=line-stack

验证数据：

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '0%',
    data: ['上一周', '本周']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '上一周',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '本周',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 100,20]
    },
    
  ]
};