echarts实现颜色渐变

柔情只为你懂 2023-01-20 09:48 15阅读 0赞

itemStyle: {
                                normal: {
                                    areaStyle: { type: 'linear', opacity: 0.3 },
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: "#1890FF" },//开始的颜色
                                            //{ offset: 0.5, color: "#1890FF" },//中间的颜色 ,中间的颜色可根据需要添加
                                            { offset: 1, color: '#FFFFFF' }//结束的颜色
                                        ]
                                    ),
                                    lineStyle: {
                                        color: "#1890FF",
                                    },
                                    borderColor: "#1890FF",//拐点边框颜色
                                    borderWidth: 2//拐点边框大小
                                }
                            },

> 效果如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70]: /images/20221021/0e7c392400a4446589df35b3ff38b82a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Echarts 实现仪表盘轴线颜色扇形渐变

1 使用详解 series.axisLine. lineStyle.color 说明：设置仪表轴线颜色。 2 原始效果图 ![watermark_type_Zm

亦凉/ 2023年10月05日 11:29/ 0 赞/ 61 阅读

相关 echarts实现颜色渐变

itemStyle: { normal: {

柔情只为你懂/ 2023年01月20日 09:48/ 0 赞/ 16 阅读

相关 css实现文字颜色渐变

.fl-left{ float:left; font-size: 46px; font-weight: 500;

布满荆棘的人生/ 2022年12月26日 10:21/ 0 赞/ 266 阅读

相关 Echarts - 渐变折线图区域

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

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

相关 echarts透明渐变效果

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

Love The Way You Lie/ 2022年09月11日 08:16/ 0 赞/ 222 阅读

相关 canvas 颜色渐变

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150） addColorStop(0.5,"

系统管理员/ 2022年04月04日 13:54/ 0 赞/ 307 阅读

相关 CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient：用线性渐变创建图像。语法：<linear-gradient> = linear-gradient(\[ \[ [

小咪咪/ 2022年04月01日 08:38/ 0 赞/ 676 阅读

相关 echarts 柱状图颜色渐变代码

设置echarts 颜色渐变方法。实例样式： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

心已赠人/ 2022年02月04日 11:55/ 1 赞/ 751 阅读

相关颜色渐变

公用代码 <view class="flex_w"> <view class="bgrc"> </view> </view> .fle

向右看齐/ 2021年07月25日 02:19/ 0 赞/ 535 阅读

相关 css3颜色渐变：css3如何实现背景颜色渐变？

为了开发网页的美观，css3背景颜色渐变是经常会用到的，那么，css3背景颜色渐变如何设置呢？本篇文章我们就来介绍关于css颜色渐变背景的设置方法。我们要知道的是cs...

朱雀/ 2021年01月29日 18:59/ 0 赞/ 931 阅读