Echarts折线图背景添加

最新推荐文章于 2024-08-27 10:37:34 发布

爱分享的Hayes小朋友

最新推荐文章于 2024-08-27 10:37:34 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts

本文链接：https://blog.csdn.net/x_XDGS/article/details/111264079

本文介绍如何使用Echarts为折线图添加背景颜色，通过在series的itemStyle属性中设置areaStyle，调整颜色和透明度，实现折线图视觉效果的提升。示例代码展示了具体配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts折线图背景添加

话不多说，先上图：
在这里插入图片描述
啥也不说了，这张图这真心的丑，这些都不重要，主要的是如何操作

代码如下：
在Echarts的series里面的一个itemStyle属性添加areaStyle属性

series: [
          {
            name: "",
            type: "line",
            data: [],
            itemStyle: {
              normal: {
                color: "#ffb500",
                lineStyle: {
                  color: "#ffb500",
                  width: 3,
                },
                areaStyle: {   //添加背景颜色
                  type: "default",
                  color: "#ffb500",  //背景颜色
                  opacity: 0.3,   //透明度
                },
              },
            },
          },
        ]