关于前端:echarts折线图添加背景色折线显示区域添加渐变色

1.echarts图表增加背景色。在xAxis外面增加splitArea相干属性:

splitArea: {
     show: true,
     areaStyle: {
        color: ['rgba(216,216,216,0.08)', 'rgba(216,216,216,0.04)']
      }
}

显示成果:

2.折线图中每条折线显示区域增加突变背景色。须要在series中增加areaStyle相干属性:

areaStyle: {
     normal: {//自定义色彩,渐变色填充折线图区域
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,//变动度
     //渐变色 
     [{
            offset: 0,
     color: 'rgba(255, 255, 0, 0.12)'
     }, {
            offset: 1,
     color: color
          }]),
     },
}

上面来看最终显示成果

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理