Echarts折线图背景添加

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

原创最新推荐文章于 2024-08-27 10:37:34 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

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

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,   //透明度
                },
              },
            },
          },
        ]