Advertisement

使用echarts实现折线图上下限区域的展示

阅读量:

效果展示图:

在这里插入图片描述

在绘制此类区域时,主要借助了series的两个特性:
设计思路为将上下限均绘制为区域,随后通过调整折线的透明度使其不可见,对上部区域赋予特定颜色,而下部区域则采用与echarts图表背景相同的颜色(如白色),以实现视觉上的统一效果。

复制代码
    lineStyle: {
      opacity: 0
    }, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
    areaStyle: {
      color: 'rgba(0,122,255,0.1)'
    }, // 填充的颜色
    
    
    
    AI写代码javascript
    
    运行

我需要获取的最大天数、最小天数以及平均天数信息,同时要求ECharts图表的背景色设置为白色。
数据格式如下:

在这里插入图片描述

全部评论 (0)

还没有任何评论哟~