echars折线图添加背景

LoveZJC12138

已于 2022-09-13 09:53:41 修改

阅读量1k

点赞数

文章标签： javascript 前端开发语言 echarts

于 2022-09-01 16:54:53 首次发布

本文链接：https://blog.csdn.net/LoveZJC96/article/details/126646728

版权

给一些加背景，做成类似样子。

只要在 series 中加入 markArea 对象，而markArea中添加代码

markArea: {
              itemStyle: {
                color: 'rgba(255, 244, 0)',
              },
              data: [
                      [
                        {
                          name: 'Morning Peak',
                          xAxis: '07:30'
                            y: '55%', //如果出现在y周正半轴就写在上面的对象里
                            label: {
                              position: 'top', //标题出现的位置，默认在上方
                                    }
                        },
                        {
                          xAxis: '10:00'
                        }
                      ],
                      [
                        {
                          name: 'Evening Peak',
                          xAxis: '17:30'
                        },
                        {
                            name: '出口浓度监测数据缺失',
                            xAxis: '18:30',
                            y: '55%', //如果出现在y周负半轴就写在下面的对象里
                            label: {
                              position: 'bottom', //标题出现的位置
                                    },
                            itemStyle: {
                              //可以单独设置不同颜色
                              color: 'rgba(240, 155, 160)',
                                },
                         },
                      ]
                    ],
          },