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

最新推荐文章于 2024-04-03 06:21:14 发布

永远不会太晚

最新推荐文章于 2024-04-03 06:21:14 发布

阅读量2.3k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42611074/article/details/128949214

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

当数值为负数时，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'
      }
    }
  ]
};