echarts实现颜色渐变

柔情只为你懂 2023-01-20 09:48 108阅读 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 条评论，108人围观）

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

相关阅读

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

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

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

相关 echarts：鼠标移入移出，颜色渐变

简单的方式 normal:{ //静态模式下显示的默认样式 textStyle:{ color:'red' } },

Love The Way You Lie/ 2023年06月10日 03:29/ 0 赞/ 39 阅读

相关 echarts实现颜色渐变

itemStyle: { normal: {

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

相关 css实现文字颜色渐变

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

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

相关 echarts透明渐变效果

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

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

相关 canvas 颜色渐变

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

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

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

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

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

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

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

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

相关颜色渐变

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

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

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

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

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