Echarts - 渐变折线图区域

电玩女神 2022-10-15 09:59 142阅读 0赞

## 效果图 ##

如下图所示，两种颜色可以搭配营造渐变效果：

![在这里插入图片描述][20210524171902259.png]

## 实现方法 ##

> 官方文档(areaStyle > color)：[https://echarts.apache.org/zh/option.html\#xAxis.splitArea.areaStyle.color][https_echarts.apache.org_zh_option.html_xAxis.splitArea.areaStyle.color]

在 `series` 中加入以下配置代码：

// 注意: ets: echarts库(echarts下的graphic方法)
    // import * as ets from 'echarts'
    
    areaStyle: { 
        color: new ets.graphic.LinearGradient(0, 0, 0, 1, [{ 
            offset: 0,
            color: 'green'
        }, { 
            offset: 1,
            color: 'red'
        }])
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

[20210524171902259.png]: /images/20221014/4673466671c8435f8ee730b9595711cb.png
[https_echarts.apache.org_zh_option.html_xAxis.splitArea.areaStyle.color]: https://echarts.apache.org/zh/option.html#xAxis.splitArea.areaStyle.color
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20221014/82d750e37925471da9fccfcea023b2ce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 改变折线图曲线颜色、区域颜色

效果图： ![1340563-20190828020605643-969486924.png][] 代码： option = { xAxis:

矫情吗；*/ 2023年06月04日 12:53/ 0 赞/ 17 阅读

相关 echarts折线图线条颜色和区域颜色设置

原文出处：[https://blog.csdn.net/qq\_36538012/article/details/100641267][https_blog.csdn.net_

本是古典何须时尚/ 2023年02月28日 12:49/ 0 赞/ 106 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 210 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 251 阅读

相关 Echarts - 渐变折线图区域

效果图如下图所示，两种颜色可以搭配营造渐变效果： ![在这里插入图片描述][20210524171902259.png] 实现方法 > 官方文档(areaSt

电玩女神/ 2022年10月15日 09:59/ 0 赞/ 143 阅读

相关 Echarts折线图样式收集

效果图1： ![20210830112730906.png][] option:{ backgroundColor: "rgba(255,

妖狐艹你老母/ 2022年09月09日 06:22/ 0 赞/ 163 阅读

相关 echarts折线图实例一

1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：![20170926122012950][]

- 日理万妓/ 2022年06月08日 12:54/ 0 赞/ 242 阅读

相关 echarts实现动态折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年05月15日 02:24/ 0 赞/ 725 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 291 阅读

相关 ECharts之折线图

效果图 ![在这里插入图片描述][20190801172702725.gif] 背景图片 ![20190725170845879.png][] 下载EChar

ゝ一世哀愁。/ 2021年09月30日 05:00/ 0 赞/ 1167 阅读