document.write("");

echarts 渐变堆叠面积图

相对于示例 https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradient

区别:y轴数据默认显示

复制代码
option = {
  color: ['#80FFA5'],
  title: {
    text: 'A type'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['渗透数']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [
        'Jan-22',
        'Feb-22',
        'Mar-22',
        'Apr-22',
        'May-22',
        'Jun-22',
        'Jul-22',
        'Aug-22',
        'Sep-22',
        'Oct-22',
        'Nov-22',
        'Dec-22'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '渗透数',
      type: 'line',
      stack: 'Total',
      smooth: true,
      label: {
        show: true,
        position: 'top'
      },
      lineStyle: {
        width: 0
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#32f162'
          },
          {
            offset: 1,
            color: '#4e67ff'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [10, 15, 20, 168, 35, 75, 48, 68, 54, 54, 787, 78]
    }
  ]
};
复制代码

 

posted @   人间春风意  阅读(321)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示

距今时间:
1025天8.00 小时 37.39 分钟

当前新增阅读数:140327