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

墨蓝 2024-03-27 15:06 51阅读 0赞

当数值为负数时，areaStyle会出现在上方，如下图：  
![在这里插入图片描述][2f03525c3c804154adc63c7265c0745c.png]

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’  
![在这里插入图片描述][abea26edbbce47049906e15eb0e20305.png]

柱状图结合折线图的情况  
![在这里插入图片描述][574973db45634416b2db3f7ed89878ad.png]

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'
          }
        }
      ]
    };

[2f03525c3c804154adc63c7265c0745c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3a118d8903de45b59d672ccb37b3fdf8.png
[abea26edbbce47049906e15eb0e20305.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1ca8e59d82f5482989d0fb0827bd4e9c.png
[574973db45634416b2db3f7ed89878ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/19978a3db1094984b7cab9790d56c6ad.png