echarts折线图负值时areaStyle区域色始终在折线下方(负值时会自动在上方)

最新推荐文章于 2024-11-11 19:33:57 发布

原创最新推荐文章于 2024-11-11 19:33:57 发布 · 3.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在ECharts图表库中，当数值为负时areaStyle会出现在上方。为了解决这个问题，可以通过设置areaStyle的origin属性为start，确保areaStyle始终位于折线图下方。示例代码展示了如何在单一折线图和柱状图结合折线图的情况下应用此设置。

当数值为负数时，areaStyle会出现在上方，如下图：
在这里插入图片描述


option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [-820, -932, 901, 934, -1290, 1330, 1320],
      type: 'line',
      areaStyle: {
      }
    }
  ]
};

想areaStyle一直位于折线图下方，在 areaStyle 属性中增加属性： origin: ‘start’
在这里插入图片描述

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [-820, -932, 901, 934, -1290, 1330, 1320],
      type: 'line',
      areaStyle: {
        origin: 'start'
      }
    }
  ]
};

柱状图结合折线图的情况
在这里插入图片描述

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar'
    },
    {
      yAxisIndex: 1,
      data: [-820, -932, 901, 934, -1290, 1330, 1320],
      type: 'line',
      areaStyle: {
        origin: 'start'
      }
    }
  ]
};