echarts 柱状图颜色渐变代码

心已赠人 2022-02-04 11:55 715阅读 1赞

设置echarts 颜色渐变方法。  
实例样式：

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

**设置 series.itemStyle.normal**

option = { 
        xAxis: { 
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            
            itemStyle: { 
                        normal: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0,
                                color: 'red'
                            }, { 
                                offset: 1,
                                color: 'yellow'
                            }]),
                        }
                    }
        }]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20220204/f7221c18adb84302a7c35d54fe13b4cd.png

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts 柱状图正负数颜色

![b2fcda83ba9b4a178b0bbdc0bf5c24f8.png][] series: [ { name: 'Evap

忘是亡心i/ 2023年09月23日 16:07/ 0 赞/ 98 阅读

相关 01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等

描述在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCha

灰太狼/ 2023年06月30日 01:49/ 0 赞/ 17 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 258 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 607 阅读

相关 echarts 柱状图改变颜色

![在这里插入图片描述][20210402094918320.png] [20210402094918320.png]: /images/20221022/4df04086

忘是亡心i/ 2022年11月15日 14:29/ 0 赞/ 162 阅读

相关【echarts】修改柱状图颜色

创建一个柱状图对象 <div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px">

迈不过友情╰/ 2022年06月17日 20:09/ 0 赞/ 276 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 320 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 278 阅读

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

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

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

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 696 阅读